響應式佈局方法總結

時間 2019-11-16

標籤響應佈局方法總結简体版

原文原文鏈接

定義

響應式佈局指的是同一頁面在不一樣屏幕尺寸下有不一樣的佈局。傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式佈局只要開發一套就夠。css

優勢

面對不一樣分辨率設備靈活性強
可以快捷解決多設備顯示適應問題

缺點

僅適用佈局、信息、框架並不複雜的部門類型網站
兼容各類設備工做量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

響應式與自適應區別

響應式：只須要開發一套代碼。響應式設計經過檢測視口分辨率，針對不一樣客戶端在客戶端作代碼處理，來展示不一樣的佈局和內容。
自適應：須要開發多套界面。經過檢測視口分辨率，來判斷當前訪問的設備是：pc端、平板、手機，從而請求服務層，返回不一樣的頁面。

響應式佈局方法一：媒體查詢

使用@media媒體查詢能夠針對不一樣的媒體類型定義不一樣的樣式，特別是響應式頁面，能夠針對不一樣屏幕的大小，編寫多套樣式，從而達到自適應的效果。舉例來講：html

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}
複製代碼

上述的代碼經過媒體查詢定義了幾套樣式，經過max-width設置樣式生效時的最大分辨率，上述的代碼分別對分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕設置了不一樣的背景顏色。前端

經過媒體查詢，能夠經過給不一樣分辨率的設備編寫不一樣的樣式來實現響應式的佈局，好比咱們爲不一樣分辨率的屏幕，設置不一樣的背景圖片。好比給小屏幕手機設置@2x圖，爲大屏幕手機設置@3x圖，經過媒體查詢就能很方便的實現。css3

可是媒體查詢的缺點也很明顯，若是在瀏覽器大小改變時，須要改變的樣式太多，那麼多套樣式代碼會很繁瑣。git

響應式佈局方法二：百分比%

好比當瀏覽器的寬度或者高度發生變化時，經過百分比單位，經過百分比單位可使得瀏覽器中的組件的寬和高隨着瀏覽器的變化而變化，從而實現響應式的效果。github

height,width屬性的百分比依託於父標籤的寬高。可是，padding、border、margin等屬性的狀況又不同？瀏覽器

子元素的top和bottom若是設置百分比，則相對於直接非static定位(默認定位)的父元素的高度，一樣，子元素的left和right若是設置百分比，則相對於直接非static定位(默認定位的)父元素的寬度。
子元素的padding若是設置百分比，不管是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。
子元素的margin若是設置成百分比，不管是垂直方向仍是水平方向，都相對於直接父元素的width
border-radius不同，若是設置border-radius爲百分比，則是相對於自身的寬度

缺點

計算困難，若是咱們要定義一個元素的寬度和高度，按照設計稿，必須換算成百分比單位。
各個屬性中若是使用百分比，相對父元素的屬性並非惟一的。好比width和height相對於父元素的width和height，而margin、padding無論垂直仍是水平方向都相對比父元素的寬度、border-radius則是相對於元素自身等等，形成咱們使用百分比單位容易使佈局問題變得複雜。
因此，不建議用%來作響應式佈局。

響應式佈局方法三：vw/vh

css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對於視圖窗口的寬度，vh表示相對於視圖窗口高度。任意層級元素，在使用vw單位的狀況下，1vw都等於視圖寬度的百分之一。bash

與百分比佈局很類似，但更好用。前端工程師

響應式佈局方法四：rem

rem單位是相對於字體大小的html元素，也稱爲根元素。默認狀況下，html元素的font-size爲16px。因此此時1rem = 16px。架構

初版

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}
複製代碼

利用rem和媒體查詢，在分辨率發生變換時，給它不一樣的font-size。

優化版

//動態爲根元素設置字體大小
function init () {
    // 獲取屏幕寬度
    var width = document.documentElement.clientWidth
    // 設置根元素字體大小。此時爲寬的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加載應用，設置一次
init()
// 監聽手機旋轉的事件的時機，從新設置
window.addEventListener('orientationchange', init)
// 監聽手機窗口變化，從新設置
window.addEventListener('resize', init)
複製代碼

理解：上面代碼實現了，不管設備可視窗口如何變化，始終設置rem爲width的1/10.即實現了百分比佈局。就沒有初版的媒體查詢那樣僵硬。

以上代碼需在dom以前寫入（可放在head裏面第一個script標籤）

利用UI框架實現響應式佈局

其實，如今的主流UI框架都會考慮到響應式佈局這個問題，好比elementUI，iview等框架提供了柵格系統，<row>搭配<col>來實現響應式佈局。因此在工做中直接拿來使用就完事了。

移動端響應式佈局 viewport

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

width=device-width: 是自適應手機屏幕的尺寸寬度。
maximum-scale:是縮放比例的最大值。
minimum-scale:是縮放比例的最小值。
inital-scale:是縮放的初始化。
user-scalable:是用戶的能夠縮放的操做。

這個寫法是用戶不能縮放的頁面設計。由於，若是頁面能縮放的話，就會影響用戶的體驗，在手機端，咱們均可以找到點擊的按鈕或者本身感興趣的菜單進行操做。其二：就是咱們若是讓頁面縮放的話，就徹底暴露了咱們手機app的程序是html的架構了。因此，咱們專爲移動端的設計頁面的時候，就不須要用戶進行縮放了。

flexible.js

flexible.js是阿里手淘團隊開發的。用來解決移動端的適配問題。

假設如今要適配一個iphone6的設備。
- 設計師給了一個750px寬度的設計稿（注意這裏是750px而不是375px）
- 前端工程師用750px的這個比例開始還原
- 把寬高是px的轉換成rem
- 字體使用px而不使用rem
- flexible.js會自動判斷dpr進行整個佈局視口的放縮
至於flexible.js怎麼使用的能夠自行搜索，由於本人移動端作得少，就再也不多說了。