media query和media type总结

serv 7年前
   <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>