CSS媒体查询的应用

在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。
Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。

媒体类型

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视

@media screen {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
  p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
  p.test {font-weight:bold;}
}

/*移动端样式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

sans - serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.

表达式描述了媒体特征, 最终会被解析为 true 或 false.
如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是 true, 那么该媒体查询的结果为 true

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

逻辑操作符

可以使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询。

and 操作符用来把多个媒体属性组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。默认为 all 所有媒体类型。

and 用于合并多个媒体属性或合并媒体属性与媒体类型

@media (min-width: 700px) and (orientation: landscape) { ... }
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* 逗号分隔相当于or操作符 */
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not 用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only 仅在媒体查询匹配成功的情况下应用指定样式

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

语法

@media mediatype and | not | only (media feature) { css-code; }

常用媒体属性

设备宽度：device-width | min-device-width | max-device-width
设备高度：device-height | min-device-height | max-device-height
设备宽度比：device-aspect-ratio: 16/9
设备方向：orientation: portrait / landscape
设备输出分辩率：min-resolution: 300dpi | min-resolution: 2dppx
屏幕像素比：min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio
渲染区域的宽度： width | min-width | max-width
渲染区域的高度： height | min-height | max-height

设备输出分辩率(打印分辩率)：dpi, dpcm, dppx

指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。

每英寸包含点的数量（dots per inch）

普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率PPI与DPI

Media query只接受单个的逻辑表达式作为其值或者没有值

Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况著作权归作者

横竖屏的判断

@media (orientation : landscape){ /* 横屏 */ }
@media (orientation : portrait){ /* 竖屏 */ }

注意部分 Android 中有bug
当输入框获得焦点，触发弹出键盘后，横屏的样式出现了，然而他使用的是竖屏，并未把手机横过来。

添加宽度限制，屏幕宽度大于450px时，并且是横屏时，应用横屏样式

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}

高清图片适配

在普通屏下使用@1x图片，在高清屏下使用@2x图片

/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
.bg{
    background-image: url(img_1x.png);
}
/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */

@media
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-resolution: 120dpi),
  only screen and (min-resolution: 1.25dppx){
ratio:1.5){
  .bg{
      background-image: url(img_2x.png);
    }
  }

屏幕适配

移动端配合 rem 使用，适配不同宽度的屏幕

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

适配独立的样式文件

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

设备判断

@media screen and (device-aspect-ratio: 40/71) {}
或者：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}

调整模块的样式

@media screen and (max-width: 980px) {

    #pagewrap {
      width: 95%;
    }

    #content {
      width: 60%;
      padding: 3% 4%;
    }

    #sidebar {
      width: 30%;
    }
    #sidebar .widget {
      padding: 8% 7%;
      margin-bottom: 10px;
    }

  }

Media所有参数汇总

width: 浏览器可视宽度。
height: 浏览器可视高度。
device-width: 设备屏幕的宽度。
device-height: 设备屏幕的高度。
orientation: 检测设备目前处于横向还是纵向状态。
aspect-ratio: 检测浏览器可视宽度和高度的比例。(例如：aspect-ratio: 16/9)
device-aspect-ratio: 检测设备的宽度和高度的比例。
color: 检测颜色的位数。（例如：min-color: 32就会检测设备是否拥有32位颜色）
color-index: 检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome: 检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution: 检测屏幕或打印机的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)。
grid: 检测输出的设备是网格的还是位图设备。