丸子学CSS（学习半小时 - 媒体查询）

媒介类型

在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在，media属性用于为不同的媒介类型规定不同的样式
● screen 计算机屏幕（默认值）
● tty 电传打字机以及使用等宽字符网格的类似媒介
● tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
● projection 放映机
● handheld 手持设备（小屏幕、有限的带宽）
● print打印预览模式 / 打印页
● braille 盲人用点字法反馈设备
● aural 语音合成器
● all 适合所有设备

真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all'

<style media="screen">
    .box{height: 100px;width: 100px; background-color: lightblue;}   
</style>
<div class="box"></div>

媒体属性

媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符
[注意]媒体属性必须用括号()包起来，否则无效
下表中列出了所有的媒体属性

width | min-width | max-width height | min-height | max-height device-width | min-device-width | max-device-width device-height | min-device-height | max-device-height aspect-ratio | min-aspect-ratio | max-aspect-ratio device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio color | min-color | max-color color-index | min-color-index | max-color-index monochrome | min-monochrome | max-monochrome resolution | min-resolution | max-resolution scan | grid

颜色 （color）

指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0
向所有能显示颜色的设备应用样式表

<style>
  @media (color){
      .box{height: 100px;width: 100px;background-color: lightblue;}   
  }   
</style>
<div class="box"></div>

颜色索引 （color-index）

颜色索引指定了输出设备中颜色查询表中的条目数量，如果没有使用颜色查询表，则值等于0
向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示，说明返回值为0)

<style>
  @media (min-color-index: 256){
      .box{height: 100px; width: 100px;background-color: lightgreen;}   
  }   
</style>   
<div class="box"></div>

宽高比 （aspect-ratio）

宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例
向可视区域是正方形或者是宽屏的设备应用样式表

<style>
  @media (min-aspect-ratio: 1/1) {
      .box{height: 100px;width: 100px; background-color: lightgreen; }       
  }
</style>
<div class="box"></div>

设备宽高比 （device-aspect-ratio）

设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例
向宽高比为16:9的特殊宽屏设备应用样式表

<style>
  @media (device-aspect-ratio:16/9) {
      .box{ height: 100px;width: 100px; background-color: pink;}       
  }
</style>
<div class="box"></div>

设备高度 （device-height）

设备高度描述了输出设备的高度
向显示在最小高度1000px的屏幕上的文档应用样式表

<style>
  @media (min-device-height: 1000px) {
      .box{ height: 100px;width: 100px; background-color: pink;}       
  }
</style>
<div class="box"></div>

设备宽度 （device-width）

设备宽度描述了输出设备的宽度
向显示在最小宽度1000px的屏幕上的文档应用样式表

<style>
  @media (min-device-width: 1000px) {
      .box{ height: 100px; width: 100px;background-color: lightblue; }       
  }
</style>
<div class="box"></div>

网格 （grid）

网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0
向非网格设备应用样式表

<style>
  @media (grid:0) {
      .box{height: 100px;width: 100px; background-color: lightgreen;}       
  }
</style>
<div class="box"></div>

高度 （height）

高度描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度
向高度大于800px的可视区域的设备应用样式表

<style>
  @media (min-height:800px) {
      .box{ height: 100px; width: 100px;background-color: lightgreen; }       
  }
</style>
<div class="box"></div>

宽度 （width）

宽度描述了输出设备渲染区域的宽度
向宽度大于800px的可视区域的设备应用样式表

<style>
  @media (min-width:800px) {
      .box{ height: 100px;width: 100px; background-color: lightgreen;}       
  }
</style>
<div class="box"></div>

黑白 （monochrome）

黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0
向非黑白设备应用样式表

<style>
  @media (monochrome:0) {
      .box{height: 100px; width: 100px; background-color: lightgreen;}       
  }
</style>
<div class="box"></div>

方向 （orientation）

方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式
值：landscape(横屏) | portrait(竖屏)
向竖屏设备应用样式表

<style>
  @media (orientation: portrait) {
      .box{height: 100px;width: 100px;background-color: lightgreen; }       
  }
</style>
<div class="box"></div>

分辨率 （resolution）

分辨率指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示
[注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此
向每英寸至少90点的设备应用样式

<style>
  @media (min-resolution: 90dpi) {
      .box{height: 100px;width: 100px; background-color: lightgreen; }       
  }
</style>
<div class="box"></div>

扫描 （scan）

扫描描述了电视输出设备的扫描过程
值： progressive | interlace
语法：
媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假
当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）

<link rel="stylesheet" href="style.css" media="print">
<div class="box"></div> 

media并不是'print'，所以媒体查询为假。但是，style.css文件依然被下载

逻辑操作符

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

and

and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真
[注意]在不使用not或only操作符的情况下，媒体类型是可选的，默认为all
满足横屏以及最小宽度为700px的条件应用样式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }

由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为:

@media (min-width: 700px) and (orientation: landscape) { ... }

or

将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符
满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not

not操作符用来对一条媒体查询的结果进行取反
[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

only

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式
所以，在使用媒体查询时，only最好不要忽略