由於移動端的特殊性，螢幕的尺寸碎片化嚴重，要想很好的適配不同的尺寸的裝置，需要我們前端開發相比pc端要做一些基層的適配方案。
百分比+固定高度布局方案
rem解決方案
固定設計稿的寬度開發+根據裝置動態適配縮放
此方案的前提是設定螢幕為理想視口，然後通過水平百分比布局或者彈性布局，垂直方向一般用固定畫素。
優點：布局快速簡單方便、在移動裝置中水平表現良好差異不大。
缺點：由於垂直方向畫素恆定，可能水平很寬的螢幕會被拉伸變形嚴重，另外在高倍螢幕上1畫素可能被多倍的物理畫素顯示，會變的非常粗。
首先看案例： 拉勾網移動端首頁頂部的logo區域，不管如何變化瀏覽器的寬度，高度不變化，寬度自適應。
htm設定meta標籤
"viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
移動端 移動端頁面適配方案
這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說，rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...