css @media的理解

素颜马尾好姑娘i 2022-08-11 16:35 152阅读 0赞

### **css2的@media** ###

css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS。  
语法： @media sMedia \{ sRules \}  
说明：  
sMedia : 　指定设备名称。请参阅附录：设备类型  
sRules : 　样式表定义  
指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。  
示例：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style=""> 
     <span style="font-size:14px">1</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">2</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">3</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">4</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">5</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">6</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">7</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">8</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">9</span> 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style=""><span style="font-size:14px">// 设置显示器用字体尺寸</span></code> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@media&nbsp;</code><code style="">screen</code><code style="">{ </code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">BODY { </code><code style="">font-size</code><code style="">:</code><code style="">12pt</code><code style="">; }</code></span> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">}</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">// 设置打印机用字体尺寸</span></code> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@media&nbsp;</code><code style="">print</code><code style="">{ </code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@import&nbsp;</code><code style="">"print.css"</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">BODY { </code><code style="">font-size</code><code style="">:</code><code style="">8pt</code><code style="">;}</code></span> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">}</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### **css3的@media** ###

@media 属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句来匹配各种类型的屏幕。  
语法：@media ： \{ sRules \}  
取值：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style=""> 
     <span style="font-size:14px">1</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">2</span> 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style=""><span style="font-size:14px">&lt;sMedia&gt;：指定设备名称。</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">{sRules}：样式表定义。</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

说明：  
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style=""> 
     <span style="font-size:14px">01</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">02</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">03</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">04</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">05</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">06</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">07</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">08</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">09</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">10</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">11</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">12</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">13</span> 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style=""><span style="font-size:14px">media_query: [only | not]?&nbsp; [ and&nbsp; ]*</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">expression: (&nbsp; [: ]? )</span></code> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">media_type:&nbsp;</code><code style="">all</code><code style="">|&nbsp;</code><code style="">aural</code><code style="">|&nbsp;</code><code style="">braille</code><code style="">|&nbsp;</code><code style="">handheld</code><code style="">|&nbsp;</code><code style="">print</code><code style="">|&nbsp;</code><code style="">projection</code><code style="">|&nbsp;</code><code style="">screen</code><code style="">|&nbsp;</code><code style="">tty</code><code style="">|&nbsp;</code><code style="">tv</code><code style="">|&nbsp;</code><code style="">embossed</code></span> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">media_feature: width | min-width | max-width</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| height | min-height | max-height</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| device-width | min-device-width | max-device-width</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| device-height | min-device-height | max-device-height</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| color | min-color | max-color</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| color-index | min-color-index | max-color-index</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| monochrome | min-monochrome | max-monochrome</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| resolution | min-resolution | max-resolution</span></code> 
     </div> 
     <div style=""> 
      <code style=""><span style="font-size:14px">| scan | grid</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**解析  
media\_query**:媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。  
**expression**:表达式。媒体特征的匹配与否。  
**media\_type**:媒体的种类。包括了很多。  
**media\_feature**:媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。

[DEMO][]（推荐在Chrome或者FIREFOX下打开，打开后，按快捷键“CTRL”+”+”,“CTRL”+”-”来缩放页面）:  
[![使用CSS3的@media来实现网页自适应的效果图][CSS3_media]][CSS3_media]

### **CSS代码** ###

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style=""> 
     <span style="font-size:14px">1</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">2</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">3</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">4</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">5</span> 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <span style="font-size:14px"><code style="">body{ </code><code style="">background</code><code style="">:</code><code style="">blue</code><code style="">;}</code><code style="">/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@media&nbsp;</code><code style="">screen</code><code style="">and (</code><code style="">max-width</code><code style="">:</code><code style="">500px</code><code style="">){body{ </code><code style="">background</code><code style="">:</code><code style="">green</code><code style="">;}}</code><code style="">/*宽度小于500px时 绿色*/</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@media&nbsp;</code><code style="">screen</code><code style="">and (</code><code style="">min-width</code><code style="">:</code><code style="">800px</code><code style="">){body{ </code><code style="">background</code><code style="">:</code><code style="">red</code><code style="">;}}</code><code style="">/*宽度大于800px时 红色*/</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@media&nbsp;</code><code style="">screen</code><code style="">and (</code><code style="">max-height</code><code style="">:</code><code style="">100px</code><code style="">){body{ </code><code style="">background</code><code style="">:yellow;}}</code><code style="">/*高度小于100px时 黄色*/</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">@media&nbsp;</code><code style="">screen</code><code style="">and (</code><code style="">min-height</code><code style="">:</code><code style="">400px</code><code style="">){body{ </code><code style="">background</code><code style="">:pink;}}</code><code style="">/*高度大于400px时 粉色*/</code></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### **HTML代码** ###

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style=""> 
     <span style="font-size:14px">1</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">2</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">3</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">4</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">5</span> 
    </div> 
    <div style=""> 
     <span style="font-size:14px">6</span> 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <span style="font-size:14px"><code style="">&lt;</code><code style="">p</code><code style="">&gt;效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：&lt;/</code><code style="">p</code><code style="">&gt;</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">&lt;</code><code style="">p</code><code style="">&gt;/*宽度500px-800px之间+高度100px-400px之间 蓝色*/&lt;/</code><code style="">p</code><code style="">&gt;</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">&lt;</code><code style="">p</code><code style="">&gt;/*宽度小于500px时 绿色*/&lt;/</code><code style="">p</code><code style="">&gt;</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">&lt;</code><code style="">p</code><code style="">&gt;/*宽度大于800px时 红色*/&lt;/</code><code style="">p</code><code style="">&gt;</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">&lt;</code><code style="">p</code><code style="">&gt;/*高度小于100px时 黄色*/&lt;/</code><code style="">p</code><code style="">&gt;</code></span> 
     </div> 
     <div style=""> 
      <span style="font-size:14px"><code style="">&lt;</code><code style="">p</code><code style="">&gt;/*高度大于400px时 粉色*/&lt;/</code><code style="">p</code><code style="">&gt;</code></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[DEMO]: http://www.zjgsq.com/example?pid=1180
[CSS3_media]: http://www.zjgsq.com/wp-content/uploads/2014/01/QQ%E6%88%AA%E5%9B%BE20140116095036.jpg