<h2>media type -- 媒体类型</h2>    <p>media type是 css2 中的一个非常有用的属性，通过 media type 我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。下面要说到 css3 中的 media query 是对 media type 的一种增强。</p>    <h3>media type的种类：</h3>    <ul>     <li> <p>all-- 适用于所有设备</p> </li>     <li> <p>print-- 用于打印机</p> </li>     <li> <p>screen-- 适用于彩色电脑显示器（也包括手机、iPad等手持设备）</p> </li>     <li> <p>speech-- 用于语音类型</p> </li>    </ul>    <p>注意： CSS2.1 和 CSS3 media query 定义了 tty , tv , projection , handheld , braille , embossed , aural 这些 media type ，但是它们在 media query 4 中都废弃了，所以不推荐使用了</p>    <h3>media type的使用方法：</h3>    <p>第一种： <link> 标签的 media 属性</p>    <pre>  <code class="language-css"><link href="style.css" media="screen print" ...</code></pre>    <p>第二种： <style> 标签的 media 属性</p>    <pre>  <code class="language-css"><style media="all" type="text/css">      p{          color: #ff0000      }  </style></code></pre>    <p>第三种： @import 方式</p>    <pre>  <code class="language-css"><style>      @import url("xxx.css") "screen,print";  </style></code></pre>    <p>第四种：在 style 里为某些样式指定 media</p>    <pre>  <code class="language-css">@media speech {      p{          color: #ff0000      }  }</code></pre>    <p>注：若没有指定media，默认为 all</p>    <h2>media query -- 媒体查询</h2>    <p>媒体查询是通过不同的媒体类型和条件定义不同的样式表，媒体查询让 CSS 可以更精确作用于不同的媒体类型和同一媒体的不同条件。也是 media type 的增强。</p>    <h3>语法</h3>    <p>媒体查询包含一个 媒体类型(media type) 以及一个到多个测试 媒体特性(media feature) 的表达式，表达式和媒体类型将根据实际情况计算得到 true 或者 false 。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真，那当前媒体查询为。</p>    <pre>  <code class="language-css">@media screen and (min-width: 700px) and (orientation: landscape) {}  /*其中screen就是媒体类型，min-width: 700px是媒体特性表达式*/</code></pre>    <h3>逻辑运算符</h3>    <ul>     <li> <p>and 运算符 -- 用于结合多个媒体特性( media feature )到一个 media query</p> <pre>  <code class="language-css">@media screen and (min-width: 700px) and (orientation: landscape) {      .name {          color:red;      }  }</code></pre> <p>当设备类型为 screen ，且 viewport 的宽度大于 700px ，并且设备可见区域宽度大于高度（横屏），三个条件都满足时，大括号内的样式才会生效。</p> </li>     <li> <p>逗号（ , ）运算符 -- 用于结合多个 media query</p> <pre>  <code class="language-css">@media (min-width: 700px), screen and (orientation: landscape) {      .name {          color:red;      }  }</code></pre> <p>上面代表两种不同设备，一种 all ，一种 screen ，用逗号分隔。</p> </li>     <li> <p>not 运算符 -- 用于对整个 media query 取反，必须位于一个 media query 的开头</p> <pre>  <code class="language-css">@media not all and (monochrome) {}</code></pre> <p>等价于：</p> <pre>  <code class="language-css">@media not (all and (monochrome)) {}</code></pre> <p>注意： not 是对整个 media query 进行否定，不能对单个 media feature 否定</p> </li>     <li> <p>only 运算符 --用来定某种特别的媒体类型</p> <p>对于支持 Media Query 的设备来说，如果存在 only 关键字，Web浏览器会忽略 only 关键字，并直接根据后面的表达式应用样式文件。对于不支持 Media Query 的设备，但能够读取 Media Type 类型的Web浏览器，遇到 only 关键字时会忽略这个样式文件。</p> <pre>  <code class="language-css">@media only screen and (min-width: 400px) and (max-width: 600px) {}</code></pre> <p>不支持 media query 但是支持 media type 的web浏览器，会省略后面的样式文件，上面的实例解释为：</p> <pre>  <code class="language-css">@media only {}</code></pre> <p>支持 media query 的web浏览器会省略 only 关键字，上面实例解释为：</p> <pre>  <code class="language-css">@media screen and (min-width: 400px) and (max-width: 600px) {}</code></pre> </li>    </ul>    <h2>media feature -- 媒体特性</h2>    <p>下面是一些媒体特性，不是全部</p>    <ul>     <li> <p>width-- 定义输出设备中的 <strong>页面可见区域</strong> 宽度</p> </li>     <li> <p>height-- 定义输出设备中的 <strong>页面可见区域</strong> 高度</p> </li>     <li> <p>device-width-- 定义输出设备的 <strong>屏幕可见</strong> 宽度</p> </li>     <li> <p>device-height-- 定义输出设备的 <strong>屏幕可见</strong> 高度</p> </li>     <li> <p>orientation-- 定义'height'是否大于或等于'width'。 <strong>portrait</strong> 代表是（竖屏）， <strong>landscape</strong> 代表否（横屏）</p> </li>     <li> <p>aspect-ratio-- 定义 width 与 height 的比率，可以设置 min/max</p> </li>     <li> <p>device-aspect-ratio-- 定义 device-width 与 device-height 的比率。可以设置 min/max 。如常见的显示器比率：4/3, 16/9, 16/10</p> </li>     <li> <p>resolution-- 定义设备的分辨率。可以设置 min/max 。如：96dpi, 300dpi, 118dpcm</p> </li>     <li> <p>color-- 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0。可以设置 min/max</p> </li>    </ul>    <h2>media query 常用方法</h2>    <ul>     <li> <p>排他 （exclusive）为确保在某一个条件下只有一个样式表生效，将查询条件严格划分，如下面：</p> <pre>  <code class="language-css">@media (max-width: 400px) {      html {          background: red;      }  }    @media (min-width: 401px) and (max-width: 800px) {      html {          background: green;      }  }    @media (min-width: 801px) {      html {          background: blue;      }  }</code></pre> </li>     <li> <p>覆盖（overriding）可以对元素设置相同优先级，使用样式顺序，通过覆盖，避免排他</p> <pre>  <code class="language-css">@media (min-width: 400px) {      html {          background: red;      }  }    @media (min-width: 600px) {      html {          background: green;      }  }    @media (min-width: 800px) {      html {          background: blue;      }  }</code></pre> </li>     <li> <p>无线端优先（Mobile first）默认样式假设为移动设备宽度，然后通过 min-width 控制扩展样式</p> <pre>  <code class="language-css">html {      background: red;  }    @media (min-width: 600px) {      html {          background: green;      }  }</code></pre> </li>     <li> <p>PC优先（desktop first）默认以宽屏进行样式设置，通过 max-width 控制样式覆盖</p> <pre>  <code class="language-css">html {      background: red;  }    @media (max-width: 600px) {      html {          background: green;      }  }</code></pre> </li>    </ul>    <h2>参考资料：</h2>    <ul>     <li> <p><a href="/misc/goto?guid=4959741771703883548" rel="nofollow,noindex">http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959741771797380639" rel="nofollow,noindex">https://segmentfault.com/a/1190000002812335</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959741771879658747" rel="nofollow,noindex">http://blog.csdn.net/ruoyiqing/article/details/39208707</a></p> </li>    </ul>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008701062</p>    <p> </p>