前段时间,做了公司一个项目的官网,就官网布局和效果来说,都是比较简单的,唯一一点不好的就是要兼容到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、把不同终端的样式分开写,便于维护。