移動端技術選型
阿新 • • 發佈：2020-09-14
（一） 開發方案及佈局技術選型
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; }