解決移動端適配的3種方法(響應式布局)

1.概述

　　　　做移動端頁面的時候，經常會遇到移動端的適配這個問題，但是並沒有認真分析過是如何適配各種機型的。

　　　　適配的根本原理其實就是將設計稿按一定的比例在不同的手機上實現。

　　　　在分析移動段適配之前首先要了解一下rem, css3的一個相對長度單位。既然是相對長度，那就有一個參照體了，rem就是相對於html元素的font-size計算值的倍數。即1rem 等於一倍的html元素的font-size值。

2.方法一：@media + rem

　　　　@media
　　　　　　媒體查詢， 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

@media screen and (min-width:350px){
    html{font-size:342%;}
}
@media screen and (min-width:360px){
    html{font-size:351.56%;}
}
@media screen and (min-width:375px){ html{font-size:366.2%;} }
@media screen and (min-width:384px){
    html{font-size:375%;}
}
@media screen and (min-width:390px){
    html{font-size:380.85%;}
}
@media screen and (min-width:393px){    /* 小米NOTE */
    html{font-size:383.79%;}
}
@media screen and (min-width:410px){
    html{font-size:400%;}
}
@media screen and (min-width:432px){ /* 魅族3 */
    html{font-size:421.875%;}
}
@media screen and (min-width:480px){
    html{font-size:469%;}
}
@media screen and (min-width:540px){
    html{font-size:527.34%;}
}
@media screen and (min-width:640px){
    html{font-size: 625%;}
}
@media screen and (width:720px){
    html{font-size: 703.125%;}
}

　　A:html元素的font-size值又是怎么確定的呢？（例如375px的屏幕寬度）

　　　　   屏幕寬度大於375px的會按照寬度375px來適配。設計平時給我們的設計稿一般是640px寬度或者750px寬度的，上面的都是假定設計稿是640px寬來計算的，750px也是同理計算。

　　　　1. 屏幕寬度是375，設計稿寬度是640，ratio = 375/640=0.5859375;
　　　　2. 我們要將設計稿上元素用css單位rem寫下來，那么該如何轉換，1rem應該等於稿子上多少px？
　　　　    設定1rem = 100px ;可以設定其它值嗎，可以，設置為100是方便我們在寫css的時候好計算，小數點直接左移兩位就可以了。比如，設計稿上一個寬46px按鈕，這樣轉換成rem直接就是0.46rem。
　　　　3. 1rem代表設計稿上100px,又該是等於設備上最后真實的多少像素呢？

　　　　　 要用到前面的屏幕寬度和設計稿的寬度比 ratio,設計稿上100px代表了真實的設備100*ratio = 58.59375px。
　　　　　 換句話說 css中寫的1rem等於設備58.59375px。又因為1rem等於1倍的html元素的font-size,所以這里的html元素的font-size最終應該設置成58.59375px。

　　　　 　為什么上述代碼中用的是百分比呢？因為一般瀏覽器中html元素的默認字號都是16px，但是當用戶放大或者縮小瀏覽器字號設置時，就不是16px了，所以將html的font-size設置成百分比更好，即 58.59375/16= 366.2109375%,也就是上面例子中的366.2%了。　

　　B:@media + rem適配移動端還有一個不可少的條件

　　　　要在head標簽中寫入一個meta標簽

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

　　　　作用是讓layout viewport = visual viewport,用戶也不可縮放頁面

3.方法二:手機淘寶 flexible.js

　　flexible.js也是rem適配的，它是將設備分成10份，1rem等於1/10　　

var devicePixelRatio = win.devicePixelRatio;

        dpr = devicePixelRatio || 1;
        if (isIPhone) {

            // iOS下，對於2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他設備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
        
       ......
       .......
        
       metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

　　win.devicePixelRatio(簡稱dpr),即設備像素比

　　上述代碼當dpr(設備物理像素和設備獨立像素比)為3時候，頁面縮入1/3，dpr為2時，頁面縮入1/2

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

　　上述代碼將1rem設置成了設備真實寬度的1/10，因此html根元素的fontSize也就是設備真實寬度的1/10，假如設計給的稿子是750px寬的，寫scss時1rem也就應該等於75px，scss文件可以這樣寫：

@function px2rem($px, $base: 75) {
    @return ($px / $base) * 1rem;
}
/*
稿子上量得某按鈕寬60px,高20px
*/
.btn{
    width:px2rem(60);
    height:px2rem(20);
}

4.方法三：vw,vh進行適配

　　vw：viewport width(可視窗口寬度)  1vw等於1%的設備寬度(設計稿寬度)
　　vh：viewport height(可視窗口高度) 1vh等於1%的設備高度(設計稿高度) 
　　這樣看來vw,vh其它是最方便的，但是目前兼容性不是特別好

　　只有在不需要考慮兼容的時候可以用這個相對最簡便的適配方案了，比如一些混合開發里，app內的瀏覽器如果支持vw、vh，只在app內使用的頁面就可以用了

/*窗口設計稿寬200px，高220px*/
@function px2vw($px, $base: 200) {
  @return ($px/($base/100)) + vw;
}
@function px2vh($px, $base: 220) {
  @return ($px/($base/100)) + vh;
}
/*頭像寬42px,高42px*/
.avantar{
    width:px2vw(42);
    heightx:px2vh(42);
}

　　以上就是解決移動端適配的三種常用方案