前端開發(fā)中移動端適配的示例分析-創(chuàng)新互聯(lián)

  
    
        填充全屏啦
    

在使用height: 100%;時需要注意的一些事項

• Margins 和 padding 會讓你的頁面出現(xiàn)滾動條，也許這是你不希望的。

• 如果你的元素實際高度大于你設(shè)定的百分比高度，那元素的高度會自動擴展。

寫到這里我突然想插個題外話，對于absolute定位的元素，用height：100%顯然也是無效的，因為此時它已經(jīng)脫離了文檔流，此時它的高度由自身內(nèi)容撐開。這是如果我希望它填滿父盒子，怎么做？這里有個黑魔法，設(shè)置它的top,left,bottom,right均為0，這時盒子就會被拉伸至填滿父盒子。

2、利用百分比實現(xiàn)寬高比固定

有時，我們希望寬度自適應(yīng)，高度隨寬度變化而變化，并有固定的寬高比。

讓我們縷縷，用height百分比顯然不行，height百分比是以父元素高度為基準的，而我們需要以寬度為基準來設(shè)置高度。

所以這里可以用到padding-top或者padding-bottom，padding是以父元素的width為基準的。我們可以設(shè)置元素的height：0，然后用padding-bottom將元素撐開，以實現(xiàn)固定寬高比。

二、rem

使用場景：對于圖片等對高度自適應(yīng)有要求的場景

rem單位：以頁面根字體的大小，也就是html元素字體的大小為基準，例如

html{
    font-size:16px;
}

那么1rem等于16px。

所以使用時，我們只要讓根字體大小隨屏幕大小自適應(yīng)，那頁面中所有使用rem單位來設(shè)置寬高的元素，大小也會隨屏幕大小自適應(yīng)了。

根據(jù)不同屏幕大小設(shè)置根字體大小有兩種方法：

1、css方法設(shè)置rem

利用媒體查詢，根據(jù)不同的屏幕大小進行設(shè)置，缺點就是一般只列舉一些代表性的屏幕大小，自適應(yīng)不能充分覆蓋所有范圍

html{
    font-size:10px
} 
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:11px
    }   
} 
@media screen and (min-width:376px) and (max-width:414px){
    html{
        font-size:12px
    }
} 
@media screen and (min-width:415px) and (max-width:639px){
    html{
        font-size:15px
    }
} 
@media screen and (min-width:640px) and (max-width:719px){
    html{
        font-size:20px
    }
} 
@media screen and (min-width:720px) and (max-width:749px){
    html{
        font-size:22.5px
    }
} 
@media screen and (min-width:750px) and (max-width:799px){
    html{
        font-size:23.5px
    }
} 
@media screen and (min-width:800px){
    html{
        font-size:25px
    }
}

2、JS方法設(shè)置rem

利用JS設(shè)置根字體大小，所以若改變發(fā)生在渲染完成之后，則會引起回流，導(dǎo)致閃屏現(xiàn)象。因此使用這種方法時，應(yīng)將JS代碼放入head頭部中并且在CSS引入之前。

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

上面clientWidth為實際屏幕的寬度，而375為設(shè)計稿基于的參考屏幕寬度，20則是當實際屏幕寬度等于參考屏幕寬度時，1rem的大小。代碼的關(guān)鍵參數(shù)20和375是這樣設(shè)置的：

a) 由于提供的設(shè)計稿現(xiàn)在基本都是以iPhone6/7/8為參考的，寬度為750px，dpr為2，所以計算rem時的參考屏幕寬度可以設(shè)置為375。

b) 由于chrome的最小字體是12px，又為了計算方便，所以可以設(shè)置1rem的大小為20px
應(yīng)用過程中，比如我們拿到了一個750的設(shè)計稿，那么首先，將設(shè)計稿里的數(shù)值除以2，得到按手機屏幕大小布局的數(shù)值（這也是375的由來）。然后，再除以20就可以將設(shè)計稿中的px轉(zhuǎn)化為rem了。

三、媒體查詢

使用場景：一般利用媒體查詢來進行特殊處理，比如

1、iphoneX這類全屏的適配

2、在適配dpr為3的iPhone Plus或者pad橫屏等超級大屏?xí)r，需要根據(jù)業(yè)務(wù)需求設(shè)置臨界值，然后展示不同內(nèi)容或者替換不同分辨率圖片（也就是常說的2倍圖、3倍圖的使用）等

四、vw、vh

vw是以屏幕寬度為基準的百分比單位，1vw=1% * deviceWidth

vh是以屏幕高度為基準的百分比單位，1v=1% * deviceHeight

vw,vh確實很好用，但是目前使用時仍需考慮兼容性的問題，在國內(nèi)一些手機自帶瀏覽器里（比如華為）會失效，并且據(jù)說碰上X5內(nèi)核時也容易踩坑 。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“前端開發(fā)中移動端適配的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!