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

移動端適配的五種方法

所謂移動端適配，就是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";

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

---

第二種方法：藉助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;}} 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

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

var designWidth = 375;  		// 設計稿寬度
var remPx = 100;               // 在屏幕寬度375px，的時候，設置根元素字體大小 100px
var scale = window.innerWidth / designWidth； //計算當前屏幕的寬度與設計稿比例
// 根據屏幕寬度 動態計算根元素的 字體大小
document.documentElement.style.fontSize = scale*remPx + 'px';

• 1
• 2
• 3
• 4
• 5

這裏咱們計算當前屏幕的寬度與設計稿比後用比例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';

• 1
• 2
• 3
• 4
• 5
• 6

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

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

• 1
• 2

若是此時設計稿中的16能夠爲任意值，你設置多少，js中屏幕寬度就除於多少再賦值給html的font-size。

若設計稿中的某元素設置寬高爲200px

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

• 1
• 2
• 3
• 4

此時能夠替換爲：

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

• 1
• 2
• 3
• 4

分析：

設計稿中的元素尺寸都是基於設計稿的寬度而定，如上述，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';

• 1
• 2
• 3
• 4

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

• 1
• 2
• 3
• 4

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

• 1
• 2
• 3
• 4

分析：

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

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