前段時間，做了公司一個項目的官網(wǎng)，就官網(wǎng)布局和效果來說，都是比較簡單的，唯一一點(diǎn)不好的就是要兼容到ie8，所以很多css3的屬性并不能用，只能老老實實按常規(guī)操作來。

為了一套代碼可以在pc、移動端、ipad端運(yùn)行正常，需要利用媒體查詢對各個樣式進(jìn)行修改，小于等于767的屬于移動端、768-1024屬于ipad端，大于等于1025的屬于pc端；由于媒體查詢會包含min-width或max-width的值,所以需要注意一下；

為了更好管理樣式，比如首頁的樣式有 index.phone.css, index.ipad.css, index.pc.css 還有公用的一些樣式會寫在一個樣式文件里，比如頭部和底部都是通用的，這些樣式可以寫在一起，當(dāng)然也要分為移動端、ipad端、pc端。

在index.html中引入這些樣式時，先引入公用的，然后引入自身的，雖然引入的樣式文件多一些，但是更好維護(hù)。

總結(jié)：1、一套代碼運(yùn)行多端的關(guān)鍵在于媒體查詢； 2、把不同終端的樣式分開寫，便于維護(hù)。

轉(zhuǎn)載于:https://juejin.im/post/5ce017ad5188257bcd45ae39

總結(jié)

以上是生活随笔為你收集整理的官网，一套代码如何运行多端？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。