HTML/CSS: 通过媒体查询增加网页在设备上的兼容性

我们知道，HTML决定了网页的内容结构，css样式表决定了网页的外观，也就是样式。对于一个简单的网站，其外观可能是多张样式表叠加而成的。那为什么不合为一张总的css样式表呢？

原因是网页制作者一般会将其中一个样式表作为网页的基本样式，然后通过链接新的样式表来达到页面改进的效果。这样做非常的方便，即不会影响原来基础样式的代码，又能在其基础上进一步的改进，这是十分方便的。

使用多个样式表还有另一个原因，便是针对不同的设备，我们可以采用不同的样式表，以达到页面兼容各种设备的目的。比如桌面PC, 笔记本电脑, 平板电脑, 手机甚至是页面的印刷版本。要做到这一点，可以利用<link>的media属性，也就是媒体查询。

如：

<!--css1-->
<link href="index-mobile.css" type="text/css" rel="stylesheet" media = "screen and (max-device-width: 480px)">

<!--css2-->
<link href="index-print.css" type="text/css" rel="stylesheet" media="print">

对于css1样式表，其媒体查询的对象是有屏幕的设备且屏幕的宽度不超过480px;

对于css2样式表，其媒体查询的对象是打印机。

对于媒体查询，还有另一种设置的方法，就是在css中设置，利用@media规则。

@media screen and (min-device-width: 481px) {
    #guarantee {
        margin-right: 250px;
    }
}
@media screen and (max-device-width: 480px) {
    #guarantee {
        margin-right: 30px;
    }
}
@media print {
    #guarantee {
        font-family: Times, "Times New Roman", serif;
    }
}

这里有一点需要说明一下， min-device-width:481px是指屏幕宽度大于**481px的设备，max-device-width：480px是指屏幕宽度小于或等于**480px的设备。

而且，min-width与min-device-width还是有点区别：min-width是指浏览器的宽度，min-device是指设备的屏幕宽度。

所以有了@media，我们就可以不必重复规则，这也是很方便的。

---

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！

---