教你搞定网站如何兼容各平台的分辨率？

问题

随着人们生活水平的提高，他们对于网站的要求也越来越高，网站也得兼容各个电脑分辨率以及平板电脑等。

例如：

• 虽然写的是弹性布局了，但还是不能兼容到某些分辨率

---

实现步骤：

一、针对高端机或者比较近代一点的浏览器，可以使用媒体查询。

通过在css里面增加@media (max-width: 1440px){}，针对于不大于1440分辨率的屏幕调试：

@media (max-width: 1440px){
    .set_meal_banner{
        width: 1200px;
        height: 370px;
    }
    .set_meal_nav li {
        width: 170px;
    }
}

---

二、针对一些比较老的浏览器或者终端机，可以实现用js控制显示相应的css样式，小于1200分辨率调试。

<script type="text/javascript">
    /*加载窄屏样式*/
    if (window.screen.width < 1200) {
        document.write('<link rel="stylesheet"  href="/css/index_narrow.css?<?= $static_version; ?>">');
    }
</script>

总结：

布局一般使用弹性布局相对兼容性高，可以针对不同的分辨率再使用相应的方法来实现兼容。这里提供了两种方式来兼容平不同平台的分辨率。