官网,一套代码如何运行多端?
生活随笔
收集整理的這篇文章主要介紹了
官网,一套代码如何运行多端?
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前段時間,做了公司一個項目的官網(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: BitMap的原理和实现
- 下一篇: 测试开发面试准备之HTTP协议-一次完整