淺談移動端適配大法

發布時間: 2019-03-16 00:48:55 來源: 互聯網 欄目: 心得技巧 點擊:

這篇文章主要介紹了淺談移動端適配大法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

前言

前端代碼的編寫永遠逃不過“兼容”二詞,從前PC時代,因為IE的傲嬌,導致程序猿們一直在兼容IE的道路上掙扎,如今移動設備的普及,仿佛讓我們看到了希望,仿佛馬上就要擺脫IE了,可是!一波還未平息,一波又來侵襲~移動端確實不用考慮IE了,各種CSS新特性也用的爽到飛起,但一座大山壓了過來,那就是分辨率的適配,移動端由于展示區域比較小,因此對于頁面在不同分辨率手機上的展示細節也要求更加嚴格,這時像PC端有些固定寬高的布局方式顯然不適應,我們被要求對于不同大小手機頁面能自適應,真是非常有(tong)趣(ku)呢

話不多說,下面就總結了一些移動端常用的適配手法:

一、百分比

使用場景:只要求寬度隨屏幕自適應,比如文字塊

百分比在PC端自適應上也經常用到,著實相當好用,但它一般用于寬度自適應的設置,高度設置百分比時,要求其父類元素有明確高度。

1、利用百分比實現填充全屏

為了讓元素設置height:100%生效,并且正好為窗口高度,則需要給html和body元素以及它所有的父元素都設置高度100%。

例如:

<html style="height: 100%;">
  <body style="height: 100%;">
    <div  class="wrap" style="height: 100%; width:100%">
        填充全屏啦
    </div>
  </body>
</html>

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

  • Margins 和 padding 會讓你的頁面出現滾動條,也許這是你不希望的。
  • 如果你的元素實際高度大于你設定的百分比高度,那元素的高度會自動擴展。

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

2、利用百分比實現寬高比固定

有時,我們希望寬度自適應,高度隨寬度變化而變化,并有固定的寬高比。

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

所以這里可以用到padding-top或者padding-bottom,padding是以父元素的width為基準的。我們可以設置元素的height:0,然后用padding-bottom將元素撐開,以實現固定寬高比。

二、rem

使用場景:對于圖片等對高度自適應有要求的場景

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

html{
    font-size:16px;
}

那么1rem等于16px。

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

根據不同屏幕大小設置根字體大小有兩種方法:

1、css方法設置rem

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

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方法設置rem

利用JS設置根字體大小,所以若改變發生在渲染完成之后,則會引起回流,導致閃屏現象。因此使用這種方法時,應將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為設計稿基于的參考屏幕寬度,20則是當實際屏幕寬度等于參考屏幕寬度時,1rem的大小。代碼的關鍵參數20和375是這樣設置的:

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

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

三、媒體查詢

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

1、iphoneX這類全屏的適配

2、在適配dpr為3的iPhone Plus或者pad橫屏等超級大屏時,需要根據業務需求設置臨界值,然后展示不同內容或者替換不同分辨率圖片(也就是常說的2倍圖、3倍圖的使用)等

四、vw、vh

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

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

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

本文標題: 淺談移動端適配大法
本文地址: http://www.leskzw.tw/web/xindejiqiao/208988.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    關于rem適配的3種常用封裝關于移動端頁面強制豎屏的方法
    Top 广东好彩1中奖规则