媒体查询（-@media）的用法详解

媒体查询（-@media）的用法详解

媒体查询可以用来干什么？

@media的作用：媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
可以简单理解为：告诉浏览器，当满足某条件时，调用某样式。当满足条件A时，调用A样式； 当满足条件B时，调用B样式。

检测

1.viewport(视窗) 的宽度与高度
2.设备的宽度与高度
3.朝向 (智能手机横屏，竖屏) 。
4.分辨率等等

语法和操作符

语法一：内联@media

@media 查询条件表达式｛ CSS样式 ｝
例：

@media not|only mediatype and (expressions) {...}

媒体查询由多媒体组成，可以包含一个或多个表达式，根据表达式条件判断是否成立，返回 true 或 false。
如果指定的多媒体类型匹配设备类型则返回查询结果为true，文档会在匹配的设备上显示指定样式效果。
可以使用操作符’not’或 ‘only’ 或’and’或，限定。
and：表示并且，要求必须满足所有的表达式要求时，才能使用media定义样式。
not：不，表示除…外，即排除掉某些特定的设备的，如 @media not print（非打印设备）。
注意：'not’针对的是一整条媒体查询语句，而非其中的某一个条件。
例：

@media not print and(max-width:1024px){...}
/* 或者 */
@media not(print and (max-width:1024px)){..}

only： 表示只有 仅仅，表示某一种的媒体类型设备。
注意：对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

,：多个条件设定使用逗号分隔，表手或者or，满足其中之一。

语法二：外链 media属性

例：

<link media=“查询条件表达式” />

除了上述格式，也可以在不同的媒体上使用不同的样式文件，使用link外联引入：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

媒体类型(mediatype)

1.print 打印机
2.screen 电脑屏幕，平板，智能手机等。
3.speech语音合成器等发声设备
4.all 用于所有多媒体类型设备（默认）

常见媒体特性（属性）

1.color颜色
2.color-index 颜色索引
3.aspect-ratio指定设备视口区域的宽高比

例：

@media only screen and (min-aspect-ratio:16/9){...}

4.device-aspect-ratio设备屏幕宽高比
5.device-height设备屏幕高度
6.device-width设备屏幕宽度
7.grid网格栅格
8.scan扫描
9.height高度
10.monochrome黑白
11.orientation方向，横屏landscape还是竖屏portrait
例：

@media (orientation:landscape){
    h1:before{
        content: '现在是横屏效果';
        color:green;
    }
}
@media (orientation:portrait){
    h1:before{
        content: '现在是竖屏效果';
        color:gold;
    }
}

12.resolution设备的分辨率范围 分辨率(dpi),分辨率倍数(dppx)
例：

@media screen and (resolution:2dppx){...}
@media screen and (resolution:3dppx){...}
@media screen and (min-resolution:2dppx){...}

13.width视口宽度 终端设备对页面的渲染区域

视口就是通常我们定义移动端头部meta的viewport。
注意：在浏览器窗口中，视口不包括滚动条、顶部或底部工具栏、菜单的部分。

例：

/* 在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色 */
@media screen and (min-width:480px){
  body{
    background-color:lightgreen;
  }
}

/* 在屏幕可视窗口尺寸大于 500 像素时将菜单浮动到页面左侧 */
 @media screen and (min-width:500px){
  #leftsidebar{
    width:200px;
    float:left;
  }  
  #main{
    margin-left:200px;
  }
}

注：以上几乎所有的属性都可以使用【min-】和【max-】前缀做限定 （grid、scan和orientation除外）

max-color：最大颜色
max-color-index：最大颜色索引
max-aspect-ratio：最大宽高比
max-device-aspect-ratio：最大设备屏幕宽高比
max-device-height：设备屏幕的最大高度
max-device-width： 设备屏幕的最大宽度
max-height： 最大高度
max-monochrome：每个像素的最大单色原件个数
max-resolution：最大分辨率
max-width：最大宽度
min-color：最小颜色
min-color-index：最小颜色索引
min-aspect-ratio：最小宽高比
min-device-aspect-ratio：最小设备屏幕宽高比
min-device-height：设备屏幕的最小高度
min-device-width： 设备屏幕的最小宽度
min-height： 最小高度
min-monochrome：每个像素的最小单色原件个数
min-resolution：最小分辨率
min-width：最小宽度