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

移動端適配的五種方法

所謂移動端適配，就是WebApp在不同尺寸的屏幕上等比顯示

第一種方法：viewport適配

原理：通過設置 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";

---

第二種方法：借助media實現rem適配

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

大部分瀏覽器的默認字體大小都是16px，所以1rem = 16px；

rem適配原理:

• 長度單位都是用 rem 設置
• 當屏幕尺寸改變時，只需要修改 html 元素的 font-size 即可實現等比適配
• 我們在制作頁面的時候，只考慮跟設計稿相同的屏幕尺寸即可，其他尺寸屏幕自動適配

//對屏幕大小划分了html不同的font-size
@media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}} 

第三種方法：JS配合修改配合rem適配

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；

• 比如某個元素，設計稿設計寬度為 640px， 我們需要在css中設置 width: 6.4rem
• 比如某個元素，設計稿設計字體大小是 16px， 我們需要在css中設置 font-size:0.16rem

從而達到rem適配。

第四種方法：JS動態修改配合CSS預處理器（less）

	// 計算屏幕寬度
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{
	width：200px;
    height:200px;
}

此時可以替換為：

.box{
	width：200/@rem;
    height:200/@rem;
}

分析：

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

此時計算box的width為400px

注：1rem = 1 html的font-size

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

第五種方法：JS動態修改配合rem適配

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

	// 計算屏幕寬度
var screen = document.documentElement.clientWidth;
	// 設置根元素字體大小
document.documentElement.style.fontSize = screen + 'px';

.box{
	width：200px;
    height:200px;
}

.box{
	width：200/375rem;
    height:200/375rem;
}

分析：

這種方法是js動態獲取屏幕寬度，直接將html的font-size設置為屏幕的寬度，再在less中進行換算。
若此時js獲取的屏幕寬度為750px，html的font-size值設置為750px后，此時計算box的width為400px

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