移動端技術選型

（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

bootstrap+grid栅格+媒體查詢布局：m.samsung.com

【bootstrap架構】

1 . 始于推特網

2 . 有預制樣式庫、元件和插件（完整的網頁解決方案）

3 . 控制權在架構本身

4 . 要按照架構所規定的規範進行開發

5 . 有自己的生态圈，不斷的更新疊代

6 . 讓開發更簡單，提高了開發的效率

①保留了有價值的預設值

②修複浏覽器的bug

③是子產品化的

④擁有詳細的文檔

①點選連結背景高亮清除:-webkit-tap-highlight-color: transparent;

②ios按鈕和輸入框清除:-webkit-appearance: none;

③禁止長按頁面彈出菜單:img,a { -webkit-touch-callout: none; }