移動端前端適配方案（總結）

from:鏈結

2.flex彈性布局

3.rem + viewport 縮放

4、rem實現

meida queries 的方式可以說是最早期的移動端布局方式，它主要是通過查詢裝置的寬度來執行不同的 css **，最終達到介面的配置。核心語法是：

@media screen and (

max-width
: 600px)

缺點以天貓的實現方式進行說明：

它的viewport是固定的：

高度定死，寬度自適應，元素都採用px做單位。

隨著螢幕寬度變化，頁面也會跟著變化，效果就和pc頁面的流體布局差不多，在哪個寬度需要調整的時候使用響應式布局調調就行（比如網易新聞），這樣就實現了『適配』。

這也是**使用的方案，根據螢幕寬度設定 rem 值，需要適配的元素都使用 rem 為單位，不需要適配的元素還是使用 px 為單位。（1em = 16px）

ps：rem

rem是css3新增的乙個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？

區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對

大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖

反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一

個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。比如：p

(推薦乙個單位轉換的工具：

根據rem將頁面放大dpr倍, 然後viewport設定為1/dpr.

如iphone6 plus的dpr為3, 則頁面整體放大3倍, 1px(css單位)在plus下預設為3px(物理畫素)

然後viewport設定為1/3, 這樣頁面整體縮回原始大小. 從而實現高畫質。

這樣整個網頁在裝置內顯示時的頁面寬度就會等於裝置邏輯畫素大小，也就是device-width。

這個device-width的計算公式為：裝置的物理解析度/(devicepixelratio * scale)，

在scale為1的情況下，device-width = 裝置的物理解析度/devicepixelratio 。

比如說「魅族」移動端的實現方式，viewport也是固定的：

。

通過以下**來控制rem基準值(設計稿以720px寬度量取實際尺寸)

以下是控制1rem = 多少px的**

//獲取視窗寬度

let htmlwidth = document.documentelement.clientwidth || document.body.clientwidth;
//獲取視窗高度
let htmldom = document.
getelementsbytagname
('html')[
0];htmldom.style.fontsize = htmlwidth /10+
'px'
;window.
addeventlistener
('resize'
,(e)
=>
);

//這裡只是以iphone6作為基本設計搞，因為最終得出的單位是rem，而1 rem = 多少px 其實是我們在js**中設定的，所以它依舊可以適配其他screen

//當改變螢幕寬度時，1 rem的實際大小被改變，同樣的，實際的顯示效果也會被改變
@function
px2rem
($px)
html
.header
}}

移動端適配 適配方案總結

通過特定的限制，控制不同樣式的呈現 限制條件最終返回true false，為真，應用其樣式 12 stylesheet media max width 800px href example.css 34 5操作邏輯 only,and,not 你可以使用邏輯操作符，包括not and和only等，構建...

移動端適配方案總結

瀏覽器的視窗。viewport與跟viewport有關的meta標籤的關係，詳細建議讀一讀這篇文章 移動前端開發之viewport的深入理解，viewport與布局的關係，可以看下這篇文章 在移動瀏覽器中使用viewport元標籤控制布局 visual viewport可見視口 螢幕寬度 layou...

移動端適配方案

最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...