移動端技術選型

（一） 開發方案及佈局技術選型

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; }