第十四讲_css媒体查询

发布时间：2024年01月16日

css媒体查询

1. 媒体查询介绍

CSS 媒体查询（media query）是响应式设计的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值是否满足条件来应用不同的 CSS 样式。

2. 媒体类型

媒体类型（media type）描述设备的一般类别：

  • all：检测所有设备
  • screen：检测电子屏幕
  • print：检测打印机
<html>
  <style>
    p {
      color: red;
    }

    /* 检测到打印机时触发 */
    @media print {
	    p {
	      color: black;
	    }
    }
  </style>

  <p>hello world</p>
</html>

3. 媒体特征

媒体特性（media feature）描述了用户代理、输出设备或环境的具体特征。用于测试这些特征是否存在以及它们的值是否满足条件，每个媒体特性表达式都必须用括号括起来。

3.1 常用的媒体特征

  • aspect-ratio：视口（viewport）的宽高比。
  • height：视口的高度。
  • width：视口（包括纵向滚动条）的宽度。
<html>
  <style>
    p {
      color: red;
    }

    /* 视口宽度为500px时触发 */
    @media (width: 500px) {
      p {
        color: black;
      }
    }
  </style>

  <p>hello world</p>
</html>

完整的媒体特征可以访问：MDN的媒体查询

4. 逻辑运算符

逻辑运算符not、and、only 和 or 可用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

  • and：用于将多个媒体查询规则组合成单条媒体查询，行为类似于逻辑与（&）运算符。
  • not：用于否定媒体查询，如果使用 not 运算符，则还必须指定媒体类型。
  • only：仅在整个查询匹配时才应用样式。
  • ,：逗号分隔列表中的每个查询都是分开的，列表的行为类似于逻辑或（or）运算符。
  • or：等价于 , 运算符。
<html>
  <style>
    .container {
      height: 500px;
      width: 500px;
      background-color: red;
    }
    @media only screen and (min-width: 600px) and (max-width: 800px) {
      .container {
        height: 200px;
        width: 200px;
        background-color: blue;
      }
    }
  </style>

  <div class="container"></div>
</html>

上面的代码可以用一种新的范围语法来实现

<html>
  <style>
    .container {
      height: 500px;
      width: 500px;
      background-color: red;
    }
    @media only screen and (600px <= width <= 800px) {
      .container {
        height: 200px;
        width: 200px;
        background-color: blue;
      }
    }
  </style>

  <div class="container"></div>
</html>

ps：运行代码，通过调整浏览器的窗口大小，观察其变化

文章来源:https://blog.csdn.net/wenqi1992/article/details/135615156
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章