CSS 为不同类型的设备建立样式表

针对要显示的页面类型（桌面PC，笔记本，平板，手机，页面的印刷版本…）

方法一：在HTML中利用<link>，添加media属性

<link  media="screen and (max-device-width:480px)" rel="stylesheet"  href="文件名.css"  type="text/css" >

类似，可创建一个查询来匹配打印机设备

<link   rel="stylesheet"  href="loung-print.css"   media="print"  >  

                                      （lounge-print文件只有在媒体类型为media才会使用。说明需要我们要通过打印机查看页面）

方法二：直接在CSS中利用@media

@media    screen and (min-device-width:481px)  {        （对于与这个查询匹配的设备，将所有适用的规则放在大括号里）

#guarantee{

margin-right:250px;                                       （所以，如设备屏幕大于480px，就会使用这些规则）

}

}

@media    screen and (max-device-width:480px)  {        （设备宽度小于等于480px,就会使用这些规则）

#guarantee{

margin-right:30px;                                        

}

}

@media    print  {        

body{

font-family:Times,"Times New Roman",serif;             （如要打印页面，,就会使用这些规则）                             

}

}

p.specials {        

color:red;          (所有其他规则应用于所有页面，因为这些规则未包含在@media中)

}

<link>和@media如何取舍？

如果所有规则都放在一个CSS文件中，CSS文件将相当庞大，此时建议用<link>来指定不同的样式表