前端移動端適配

參考部落格：移動前端自適應適配布局解決方案

使用flex彈性布局，元素寬度自適應，高度固定為某個px值。

這種適配方式是以html的font-size值為基礎，所有元素的畫素大小都使用rem表示（除了font-size以外）。

固定視口，縮放值為1.0

計算基礎font-size值font-size值的計算與設計稿寬度、裝置橫向邏輯畫素有關

font-size = 裝置橫向邏輯畫素 / (設計稿寬度 / 100)

分析：通常公司ui設計師會以iphone某個型號的尺寸進行頁面設計，如果以iphone6的尺寸進行設計，那前端拿到的設計稿的寬度就是750px；如果以iphone5的尺寸進行設計，那設計稿的寬度就是640px

假設現在設計稿以iphone6尺寸設計（750px），設計稿上的banner寬度為600px，這時候不同尺寸的手機螢幕上如何準確的表示這個banner的寬度？手機的螢幕尺寸可能有很多種，如iphone6橫向邏輯畫素為375px，iphone5橫向邏輯畫素為320px

banner在iphone6上的寬度計算

600 / 750 = x / 375
換算x = (375 * 600) / 750
等價於x = (375 / 750) * 600

375 / 750就是我們要計算的html font-size 基礎值（1rem），為了方便樣式**的編寫，可以將750除以100，在編寫樣式時同樣除以100（如設計圖600px，**中只需要寫成6rem）

注意：基礎值並不都是375 / 750，375是裝置橫向邏輯畫素，可以通過js獲取。

document.documentelement.style.fontsize = document.documentelement.clientwidth / 7.5 + 'px';
window.onresize = function ()

banner的樣式.

.banner

動態viewport指的是，viewport的縮放數值是通過js計算之後新增的。

哎不是很好理解覺得好麻煩，不如方法2，直接走流程

1.設定viewport

裝置橫向邏輯畫素 = 裝置橫向物理畫素 / (dpr * scale)

當scale等於1 / dpr時（scale等於0.5），iphone6的橫向邏輯畫素等於750px

var scale = 1 / window.devicepixelratio
document.queryselector('meta[name="viewport"]').setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.設定font-size

document.documentelement.style.fontsize = document.documentelement.clientwidth / 10 + 'px';

3.將設計稿上的標註轉化為裝置上的尺寸

裝置元素尺寸 = 設計稿元素尺寸 / (設計稿橫向邏輯畫素 / 10)

以iphone6為例，動態設定viewport，裝置橫向邏輯畫素為750px，字型設定為75px。當設計稿為640px，設計稿中的banner寬度為200px，此時展示在手機裝置上的寬度如下所示

200 / 640 = x / 750
換算x = (200 * 750) / 640
等價於x = (200 / 640) * 750 = (200 / 64) * 75
75為手機設定的html根元素font-size，banner = (200 / 64)rem

vw：1vw等於視口寬度（邏輯畫素）的1%

vh：1vh等於視口高度（邏輯畫素）的1%

vw vh與百分比的區別

vw vh相對於視口的高度和寬度；百分比相對於包含它的最近的父元素的高度和寬度（width: 50%;）

例如iphone6，視口邏輯畫素為 375px x 667px

1vw = 375px/100 =37.5px

1 vh = 667px/100 = 66.7px，。

前端移動端適配

前端技術四移動端適配

前端技術之移動端適配

前端學習筆記移動端適配之我見

前端 移動端適配

前端技術 四 移動端適配

前端技術之移動端適配

前端學習筆記 移動端適配之我見

相關推薦

前端移動端適配

前端技術四移動端適配

前端學習筆記移動端適配之我見