前端解決移動端適配的五種方法

原理：通過設定initial-scale, 將所有裝置布局視口的寬度調整為設計圖的寬度.

//獲取meta節點
var metanode = document.queryselector('meta[name=viewport]');
//定義設計稿寬度為375
var designwidth = 375;
//計算當前螢幕的寬度與設計稿比例
var scale = document.documentelement.clientwidth/designwidth;
//通過設定meta元素中content的initial-scale值達到移動端適配
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

rem：css的長度單位，根元素字型大小的倍數，只有根元素字型大小有關； html 中的根元素即 html 元素。

大部分瀏覽器的預設字型大小都是16px，所以1rem = 16px；

rem適配原理:

//對螢幕大小劃分了html不同的font-size
@media screen and (min-width: 320px) }
@media screen and (min-width: 360px) }
@media screen and (min-width: 375px) }
@media screen and (min-width: 400px) }
@media screen and (min-width: 414px) }
@media screen and (min-width: 440px) }
@media screen and (min-width: 480px) }
@media screen and (min-width: 520px) }
@media screen and (min-width: 560px) }
@media screen and (min-width: 600px) }
@media screen and (min-width: 640px) }
@media screen and (min-width: 680px) }
@media screen and (min-width: 720px) }
@media screen and (min-width: 760px) }
@media screen and (min-width: 800px) }
@media screen and (min-width: 960px) }

var designwidth = 375;  		// 設計稿寬度
var rempx = 100;               // 在螢幕寬度375px，的時候，設定根元素字型大小 100px
var scale = window.innerwidth / designwidth； //計算當前螢幕的寬度與設計稿比例
// 根據螢幕寬度 動態計算根元素的 字型大小
document.documentelement.style.fontsize = scale*rempx + 'px';

這裡我們計算當前螢幕的寬度與設計稿比後用比例scale乘上100，是因為rem都是基於font-size值設定的，100便於計算，值可以為任意數，比如10，但是chrome中最小為12，所以這裡選擇用100；

從而達到rem適配。

// 計算螢幕寬度
var screen = document.documentelement.clientwidth;
// 計算字型大小，取螢幕寬度的16分之一
var size = screen / 16;
// 設定根元素字型大小
document.documentelement.style.fontsize = size + 'px';

js獲取當前螢幕的寬度，將螢幕寬度的16分之一設定給html的font-size

// 此時設計稿的寬度為375，定義乙個less變數等於16分之一的設計稿寬度 @rem: 375/16rem;

如果此時設計稿中的16可以為任意值，你設定多少，js中螢幕寬度就除於多少再賦值給html的font-size。

若設計稿中的某元素設定寬高為200px

.box

此時可以替換為：

.box

分析：

設計稿中的元素尺寸都是基於設計稿的寬度而定，如上述，200px的寬度是基於設計稿375px而定的，但當js中獲取的寬度發生改變時，需要解決適配問題。假設js中獲取的此時螢幕寬度為750px，那麼此時html的font-size值為750/16 px；

此時計算box的width為400px

注：1rem = 1 html的font-size

此方法不需要進行單位數值的計算，只需要定義乙個less變數，再查詢替換將單位px換成 /@rem 即可。

這種方法跟第四種雷同，但不需要再在less中定義變數，只需要進行js獲取配合查詢替換px即可。

// 計算螢幕寬度
var screen = document.documentelement.clientwidth;
// 設定根元素字型大小
document.documentelement.style.fontsize = screen + 'px';

.box

.box

分析：

這種方法是js動態獲取螢幕寬度，直接將html的font-size設定為螢幕的寬度，再在less中進行換算。

若此時js獲取的螢幕寬度為750px，html的font-size值設定為750px後，此時計算box的width為400px

200/375rem = 200/375*750 px = 400px

前端解決移動端適配的五種方法

談談移動端螢幕適配的幾種方法

移動端適配的方法

移動端幾種做前端適配的方法講解

前端解決移動端適配的五種方法

談談移動端螢幕適配的幾種方法

移動端適配的方法

移動端幾種做前端適配的方法講解

相關推薦