淺談web自適應

時間 2019-11-18

標籤淺談 web 自適應欄目 HTML 简体版

原文原文鏈接

前言

隨着移動設備的普及，移動web在前端工程師們的工做中佔有愈來愈重要的位置。移動設備更新速度頻繁，手機廠商繁多，致使的問題是每一臺機器的屏幕寬度和分辨率不同。這給咱們在編寫前端界面時增長了困難，適配問題在當下顯得愈來愈突出。記得剛剛開始開發移動端產品的時候向設計MM要了不一樣屏幕的設計圖，結果可想而知。本篇文章分享了一些處理多屏幕自適應的經驗，但願有益於各位。
特別說明：在開始這一切以前，請開發移動界面的工程師們在頭部加上下面這條meta：javascript

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

簡單事情簡單作-寬度自適應
所謂寬度自適應嚴格來講是一種pc端的自適應佈局方式在移動端的延伸。在處理pc端的前端界面時候須要用到全屏佈局時採用的就是此種佈局方式。它的實現方式也比較簡單，將外層容器元素按照百分比鋪滿的方式，裏面的子元素固定或者左右浮動。css

.div {
  width:100%; height:100px;
}
.child {
  float: left; 
}
.child {
  float:right;
}

因爲父級元素採用百分比的佈局方式，隨着屏幕的拉伸，它的寬度會無限的拉伸。而子元素因爲採用浮動，那麼它們的位置也會固定在兩端。該寬度自適應在新的時代有了新的方法，隨着彈性佈局的普及，它常常被flex的伸縮性佈局方式替代，變得愈來愈「彈性」十足。須要瞭解彈性佈局，請前往flex佈局教程。html

大小之辨-完成自適應前端

這種解決方案相對前一種來講進步很多，不只僅寬度實現了自適應，並且界面全部的元素大小和高度都會根據不一樣的分辨率和屏幕寬度的設備來調整元素、字體、圖片、高度等屬性的值。簡單來講就是在不一樣的屏幕下，你看到的字體和元素高度的大小是不同的。在這裏，有人就會說利用的是媒體查詢屬性，根據不一樣的屏幕寬度，調整樣式。我以前也是這樣想的，可是你須要考慮到界面上的許多元素須要設置字體，若是用media query爲每一個元素在不一樣的設備下都設置不一樣的屬性的話，那麼有多少中屏幕咱們的css就會增長多少倍。實際上在這裏，咱們採用的是js和css屬性rem來解決這個問題的。
REM屬性指的是相對於根元素設置某個元素的字體大小。它同時也能夠用做爲設置高度等一系列能夠用px來標註的單位。java

html {
 font-size: 10px;
}
div {
 font-size: 1rem;
 height: 2rem;
 width: 3rem;
 border: .1rem solid #000;
}

採用以上寫法，div繼承到了html節點的font-size，爲自己定義了一系列樣式屬性，此時1em計算爲10px，即根節點的font-size值。因此，這時div的高度就是20px，寬度是30px，邊框是1px，字體大小則是10px；一旦有了這樣的方法，咱們天然能夠根據不一樣的屏幕寬度設置不一樣的根節點字體大小。假設咱們如今設計的標準是iphone5s，iphone5系列的屏幕分辨率是640。爲了統一規範，咱們將iphone5 分辨率下的根元素font-size設置爲100px;web

<!--iphone5-->
html {
 font-size: 100px;
}

那麼以此爲基準，能夠計算出一個比例值6.4。咱們能夠得知其餘手機分辨率的設備下根元素字體大小：bootstrap

/*
數據計算公式 640/100 = device-width / x  能夠設置其餘設備根元素字體大小
ihone5: 640  ： 100
iphone6: 750 : 117
iphone6s: 1240 : 194
*/
var deviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

在head中，咱們將以上代碼加入，動態地改變根節點的font-size值。
接下來咱們能夠根據根元素的字體大小用rem設置各類屬性的相對值。固然，若是是移動設備，屏幕會有一個上下限制，咱們能夠控制分辨率在某個範圍內，超過了該範圍，咱們就再也不增長根元素的字體大小了：瀏覽器

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

通常的狀況下，你是不須要考慮屏幕動態地拉伸和收縮。固然，假如用戶開啓了轉屏設置，在網頁加載以後改變了屏幕的寬度，那麼咱們就要考慮這個問題了。解決此問題也很簡單，監聽屏幕的變化就能夠作到動態切換元素樣式：前端工程師

window.onresize = function(){
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
 };

爲了提升性能，讓代碼開起來更加完美，能夠爲它加上節流閥函數：app

window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);

順帶解決高保真標註與實際開發值比例問題
若是大家設計稿標準是iphone5，那麼拿到設計稿的時候必定會發現，徹底不能按照高保真上的標註來寫css，而是將各個值取半，這是由於移動設備分辨率不同。設計師們是在真實的iphone5機器上作的標註，而iphone5系列的分辨率是640，實際上咱們在開發只須要按照320的標準來。爲了節省時間，不至於每次都須要將標註取半，咱們能夠將整個網頁縮放比例，模擬提升分辨率。這個作法很簡單，爲不一樣的設備設置不一樣的meta便可:

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scal')

這樣設置一樣能夠解決在安卓機器下1px像素看起來過粗的問題，由於在像素爲1px的安卓下機器下，邊框的1px被壓縮成了0.5px了。總之是一勞永逸！淘寶和網易新聞的手機web端就是採用以上這種方式，自適應各類設備屏幕的，你們有興趣能夠去參考參考。下面是完整的代碼:

<!DOCTYPE html>
<html>
<head>
  <title>測試</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  <script type="text/javascript">
(function() {
  // deicePixelRatio ：設備像素
  var scale = 1 / devicePixelRatio;
  //設置meta 壓縮界面 模擬設備的高分辨率
  document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  //debounce 爲節流函數，本身實現。或者引入underscoure便可。
  var reSize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      //按照640像素下字體爲100px的標準來，獲得一個字體縮放比例值 6.4
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
  }, 50);
 
  window.onresize = reSize;
})();
  </script>
  <style type="text/css">
    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
 
    div {
      height: 0.5rem;
      widows: 0.5rem;
      border: 0.01rem solid #19a39e;
    }
 
    ........
  </style>
  <body>
    <div>
    </div>
  </body>
</html>

讓元素飛起來-媒體查詢
運用css新屬性media query 特性也能夠實現咱們上說到過的佈局樣式。爲尺寸設置根元素字體大小:

@media screen and (device-width: 640px) { /*iphone4/iphon5*/
    html {
        font-size: 100px;
      }
    }
 
@media screen and (device-width: 750px) { /*iphone6*/
    html {
        font-size: 117.188px;
      }
    }
    @media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }

這種方式也是可行的，缺點是靈活性不高，取每一個設備的精確值須要本身去計算，因此只能取範圍值。考慮設備屏幕衆多，分辨率也良莠不齊，把每一種機型的css代碼寫出來是不太可能的。可是它也有優勢，就是無需監聽瀏覽器的窗口變化，它會跟隨屏幕動態變化。媒體查詢的用法固然不只僅像在此處這麼簡單，相對於第二種自適應來講有不少地方是前者所遠遠不及的。最明顯的就是它能夠根據不一樣設備顯示不一樣的佈局樣式！請注意，這裏已經不是改變字體和高度那麼簡單了，它直接改變的是佈局樣式！

@media screen and (min-width: 320px) and (max-width: 650px) { /*手機*/
  .class {
    float: left;
  }
}
 
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/
  .class {
    float: right;
  }
}
 
@media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/
  .class {
    float: clear;
  }
}

此種自適應佈局通常經常使用在兼容PC和手機設備，因爲屏幕跨度很大，界面的元素以及遠遠不是改改大小所能知足的。這時候須要從新設計整界面的佈局和排版了。
許多css框架常常用到這樣的多端解決方案，著名的bootstrap就是採用此種方式進行柵格佈局的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。