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

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

推薦：

1.使用rem單位來做網頁適配，這個是我比較推薦的一種，效果很好，瀏覽器的兼容性也不錯

只要一行代碼就能適配多個分辨率終端 

        (function(doc,win){
            var docEl =doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function(){
                        var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;
                        if (!clientWidth) {return};
                        docEl.style.fontSize = 100 * (clientWidth/750) + 'px';
                    };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document,window)

上面是做適配的代碼。改變html的font-size,更詳細的rem用法在這里不作過多講解，請網上搜一下（建議基礎值設置大一點可以避免因為精度丟失引起的布局錯亂，上面我設置的是100px）

 

第一種方法：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

//對屏幕大小划分了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
————————————————
版權聲明：本文為CSDN博主「ClingJA」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_37632943/article/details/95471535