css媒体查询Media queries

什么是媒体查询

媒体查询(Media queries) 根据不同的设备类型或者特定的特征和设备参数设定不同的css样式

使用媒体查询的第一步就是要先确定设备类型

• all 适用于所有设备(默认选项)
• print 打印预览模式
• screen 屏幕
• speech 语音合成器

其次是确定媒体特性

媒体特性是指输出设备，或是浏览环境的具体特征的值是否存在,值为多少。媒体特性应该是和设备类型息息相关的,不同的设备类型应该有不同的媒体特性

以下为部分媒体特性(详见官网)

• height
  • 视窗（viewport）的高度
• width
  • 视窗（viewport）的宽度，包括纵向滚动条的宽度
• aspect-ratio
  • 视窗（viewport）的宽高比
• orientation
  • 视窗（viewport）的旋转方向

举一些例子

 @media {
            body {
                background-color: lightblue;
            }
        }

表示匹配于所有设备、所有的特性值

这里我想表达的是设备类型默认是全部,媒体特性不是必填的.但是当我们写媒体查询表达式的时候,确定设备类型总应该是第一步

@media (height: 360px) {
            body {
                background-color: red;
            }
        }

表示匹配于所有设备、viewport的高度等于360px

定位设备类型

@media screen {...}
@media screen,print  {...}

同时定位设备类型和媒体特性的值

@media screen and (width: 1050px) { ... }

很多时候我们需要根据设备类型和媒体特性联合构造复杂的媒体查询,这个时候需要用到逻辑操作符

逻辑操作符

• and

  • and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

  • @media screen and (width: 1050px) { ... }
    // 表示设备类型为screen 视口宽度为1050px
    

• not

  • not运算符用于否定媒体查询,如果使用not运算符，则还必须指定媒体类型。

  • @media not screen and (width:300px) {
                body {
                    background-color: red;
                }
            }
    // 表示设备类型为screen 视口宽度为300px的除外
    

• only

  • only关键字的作用是让那些不支持媒体查询表达式但是能够读取媒体类型的设备的浏览器将表达式的样式隐藏起来

  • // 没有例子 我和ie浏览器只能选择一个
    

媒体查询的引入方式

内联样式引入

<style media="width:300px">
       // css...
 </style>

外联样式引入

<link rel="stylesheet" href="css" media="(min-width:300px) and (max-width:400px)">

参见

HTML5与CSS3权威指南

MDN Web 文档