淺談web移動端適配問題

時間 2019-12-13

標籤淺談 web 移動適配問題欄目 HTML 简体版

原文原文鏈接

1、佈局方案css

目前在解決移動端頁面適配問題方案選擇上，目前用得比較可能是百分比佈局，彈性佈局flex，rem佈局，本文將重點跟你們探討rem佈局。html

2、viewportweb

在介紹rem佈局以前，首先跟你們介紹一下viewpoint視口。瀏覽器

通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認狀況下，通常來說，移動設備上的viewport都是要大於瀏覽器可視區域的，這是由於考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，這個是由設備本身決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。sass

三個viewport：layout viewport，visual viewport，ideal viewport安全

layout viewport：即爲佈局視口，dom寬度，瀏覽器默認狀況下把viewport設爲一個較寬的值，好比980px。（document.documentElement.clientWidth）app

visual viewport：瀏覽器可視區域的大小，屏幕寬度。（window. innerWidth）dom

ideal viewport：理想適口：使佈局視口就是可見視口；ide

在進行移動設備網站的開發時，咱們須要的是ideal viewport。那麼怎麼才能獲得ideal viewport呢？這就該輪到meta標籤出場了。函數

咱們在開發移動設備的網站時，最多見的的一個動做就是把下面這個東西複製到咱們的head標籤中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱爲一個個屬性和值)，以下：

width	設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

3、js實現rem自動匹配計算font-size

利用js監聽屏幕寬度變化來實現更改HTML 根元素font-size的值，一下是js代碼：

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

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

此代碼選640px爲基準值，爲何選640呢，

640px的頁面寬度是一個安全的最大寬度，保證了移動端頁面兩邊不會留白。注意這裏的px是css邏輯像素，與設備的物理像素是有區別的。如iPhone 5使用的是Retina視網膜屏幕，使用2px x 2px的 device pixel 表明 1px x 1px 的 css pixel，因此設備像素數爲640 x 1136px，而它的CSS邏輯像素數爲320 x 568px。

因此當要切移動端的頁面的時候，須要把效果圖寬度等比例縮放到640px。

好比當頁面中某一div的寬度爲60，高度爲65的時候，就能夠直接這樣寫樣式：

{
    width:0.6rem;
    height:0.65rem
}

4、使用媒體查詢進行適配

一下爲sass寫法，好比拿到的設計稿是iPhone6，設備寬爲375px.設計稿採用的像素是物理像素，二倍屏(retina)750px,因此當計算的時候要除以2.

// REM 適配 <html>
$designWidth:375;
// 375px (iPhone 6)
// 此爲基準值, 與視覺設計稿 `寬度/2` 保持一致
html {
    font-size:20px;
}
@media (min-width:320px){
  html{
    font-size: #{20*320PX/$designWidth} !important;
  }
}
@media (min-width:360px){
  html{
    font-size: #{20*360PX/$designWidth} !important;
  }
}
@media (min-width:375px){
  html{
    font-size:#{20*375PX/$designWidth} !important;
  }
}
@media (min-width:412px){
  html{
    font-size: #{20*412PX/$designWidth} !important;
  }
}
@media (min-width:480px){
  html{
    font-size:#{20*480PX/$designWidth} !important;
  }
}
@media (min-width:640px){
  html{
    font-size: #{20*640PX/$designWidth} !important;
  }
}
@media (min-width:720px){
  html{
    font-size:#{20*720PX/$designWidth} !important;
  }
}
@media (min-width:768px){
  html{
    font-size: #{20*768PX/$designWidth} !important;
  }
}
@media (min-width:1440px){
  html{
    font-size:#{20*1440PX/$designWidth} !important;
  }
}

爲了減小單位換算的時間，加快編寫代碼的效率，能夠採用函數自動換算：

@function torem($px){//$px爲須要轉換的字號
    @return ($px / 40) * 1rem; //40px爲根字體大小
}

由於根字體爲font-size：20px，設計稿採用2倍像素表示，因此除以20*2;（若是設計稿採用設備像素及跟屏幕尺寸同樣的比例，則不用除以2）

好比一個div的在設計稿上的寬度是366px,高度爲239px,則直接能夠這樣寫：

div{
    width:torem(366);
    height:torem(239);
}

4、圖片適配問題

當項目不須要對圖片要求很高的話能夠直接經過寬度適配，假如須要多不一樣的分辨率要對圖片進行更換的話，經過設備像素比實現圖片更換。如下是解決辦法：

bg-image($url)
  background-image url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
    background-image url($url + "@3x.png")

最後建議開發中採用百分百幣局跟rem佈局結合使用，固然flex佈局也是能夠。

5、具體適配實現要看設計稿給出來的模板而定。分享先到這裏。