官网，一套代码如何运行多端？

前段时间，做了公司一个项目的官网，就官网布局和效果来说，都是比较简单的，唯一一点不好的就是要兼容到ie8，所以很多css3的属性并不能用，只能老老实实按常规操作来。

为了一套代码可以在pc、移动端、ipad端运行正常，需要利用媒体查询对各个样式进行修改，小于等于767的属于移动端、768-1024属于ipad端，大于等于1025的属于pc端；由于媒体查询会包含min-width或max-width的值,所以需要注意一下；

为了更好管理样式，比如首页的样式有 index.phone.css, index.ipad.css, index.pc.css 还有公用的一些样式会写在一个样式文件里，比如头部和底部都是通用的，这些样式可以写在一起，当然也要分为移动端、ipad端、pc端。

在index.html中引入这些样式时，先引入公用的，然后引入自身的，虽然引入的样式文件多一些，但是更好维护。

总结：1、一套代码运行多端的关键在于媒体查询； 2、把不同终端的样式分开写，便于维护。

转载于:https://juejin.im/post/5ce017ad5188257bcd45ae39