HTML5 移動頁面自适應手機螢幕四類方法

使用meta标簽：viewport

viewport是使用者網頁的可視區域。翻譯為中文叫做“視區”

手機浏覽器是把頁面放在一個虛拟的“視窗”（viewpoint）中，通常這個虛拟的“視窗”（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中，使用者可以通過平移和縮放來看網頁的不同部分。

viewport的代碼如下：

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

每個屬性的介紹如下：

屬性名	取值	描述
width	正整數 或 device-width	定義視口的寬度，機關為像素
height	正整數 或 device-height	定義視口的高度，機關為像素，一般不用
initial-scale	[0.0 - 10.0]	定義初始縮放值
minimun-scale	[0.0 - -10.0]	定義縮小最小比例，它必須小于或等于maximun-scale的設定
maximun-scale		定義放大最大比例，它必須大于或等于minimun-scale設定
user-scalable	yes/no	定義是否允許使用者手動縮放頁面，預設值yes

使用css3機關：rem

em是CSS3新增的一個相對機關（root em，根em）,使用rem為元素設定字型大小時，是相對大小，但相對的隻是HTML根元素。通過它既可以做到隻修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。

目前，除了IE8及更早版本外，所有浏覽器均已支援rem。對于不支援它的浏覽器多寫一個絕對機關的聲明。這些浏覽器會忽略用rem設定的字型大小。下面就是一個例子：

p {font-size:14px; font-size:.875rem;}
           

預設html的front-size是16px，即1rem=16px，如果某div寬度為32px你可以設定為2rem。

通常情況下，為了便于計算數值則使用62.5%，即預設的10px作為技術。當然這個基數可以為任何數值，視具體情況而定。設定方法如下：

html { font-size:62.5%(10/16*100%) }
           

具體不同螢幕下的規則定義，即基數的定義方式：可以通過CSS定義，不同寬度範圍裡定義不同的基數值，當然也可以通過js一次定義方法如下：

(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 / 320) + 'px';    //其中“20”根據你設定的html的font-size屬性值做适當的變化
    };

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

使用媒體查詢

媒體查詢也是css3的方法，我們要解決的問題是适應手機螢幕，這個媒體查詢正是為解決這個問題而生。媒體查詢的功能就是為不同的媒體設定不同的css樣式，這裡的“媒體”包括頁面尺寸，裝置螢幕尺寸等。

例如：如果浏覽器視窗小于 500px, 背景将變為淺藍色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
           

使用百分比

百分比指的是父元素，所有百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是100%；

是以body預設寬度是螢幕寬度（PC中指的是浏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這隻适合布局簡單的頁面，複雜的頁面實作很困難。

原文釋出時間為：2017年12月24日

原文作者：娜娜娜娜

本文來源前端亂炖如需轉載請聯系原作者