（一） 開發方案及布局技術選型
1. 單獨制作（主流）
（1）流式百分比布局：m.jd.com（2）flex彈性伸縮布局：m.ctrip.com
【比較】前者兼容性好，但布局繁瑣、尤其是在移動端不能很好布局；后者兼容性差、尤其是PC端的IE版本，但移動端布局簡易、使用廣泛
（3）rem+less+媒體查詢布局：m.suning.com
（4）rem+flexble.js布局：m.taobao.com
【rem適配方案】html的font-size=螢屏寬度/UI稿劃分份數；頁面元素rem=頁面元素px/html的font-size
| 步驟 | 操作 |
|---|---|
| 1?? | UI設計稿寬度為375px，flexble.js檔案默認劃分10份數，html的font-size則為37.5px，設定插件cssrem的rootFontSize為37.5 |
| 2?? | FW中結合圖示+背景圖（含2/3/4/5倍圖）的像素大小 |
| 3?? | 用切片度量盒子大小+模擬文體大小 |
| 4?? | --PSD的UI稿可以直接知道文字大小-- |
| 5?? | 然后就像玩樂高積木一樣搭建html框架 |
| 6?? | 像做手工畫畫一樣填充css |
2. 回應式兼容（其次）
bootstrap+grid柵格+媒體查詢布局：m.samsung.com【bootstrap框架】
1 . 始于推特網
2 . 有預制樣式庫、組件和插件（完整的網頁解決方案）
3 . 控制權在框架本身
4 . 要按照框架所規定的規范進行開發
5 . 有自己的生態圈，不斷的更新迭代
6 . 讓開發更簡單，提高了開發的效率
（二） 技術解決
初始化樣式normalize.css
①保留了有價值的默認值②修復瀏覽器的bug
③是模塊化的
④擁有詳細的檔案
特殊樣式
①點擊鏈接背景高亮清除:-webkit-tap-highlight-color: transparent;
②ios按鈕和輸入框清除:-webkit-appearance: none;
③禁止長按頁面彈出選單:img,a { -webkit-touch-callout: none; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/106813.html
標籤：其他