關於響應式佈局，你必需要知道的

轉載自奇舞週刊

前言

響應式Web設計可讓一個網站同時適配多種設備和多個屏幕，可讓網站的佈局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。本文主要介紹一些響應式佈局容易忽略但又很重要的知識點。

視口

移動前端中常說的 viewport （視口）就是瀏覽器中用於呈現網頁的區域。視口一般並不等於屏幕大小，特別是能夠縮放瀏覽器窗口的狀況下。手機端與PC端視口存在差別，電腦端的視口寬度等於分辨率，而移動端的視口寬度跟分辨率沒有關係,寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口分辨率設置爲 980px。
1.爲何手機端視口要設爲980px?

 

喬布斯設想：蘋果手機若是在市場上火爆了，可是各個網站尚未來得及製做手機端網頁，那麼用戶不得不用手機訪問電腦版的網頁，如何用小屏幕訪問大屏幕的頁面也一樣可讀呢？喬幫主就想着爲手機固定一個視口寬度，讓手機的視口寬度等於世界上絕大多數PC網頁的版心寬度，就是980px。這樣，用手機訪問電腦版網頁的時候，旁邊恰好沒有留白。不過頁面縮放後文字會變得很是小，用戶須要手動放大縮小才能看清楚，體驗很是差。

2.約束視口
爲了解決前面的問題，能夠在網頁的中添加下面這行代碼：

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

width=device-width 視口爲設備寬度（就是人設置的一個寬度）//不設置的話默認爲980px
initial-scale=1.0 初始化的視口大小是1.0倍
maximum-scale=1.0 最大的倍數是1.0倍
user-scalable=0 不容許縮放視口

這個視口的標籤告訴瀏覽器怎麼渲染網頁。在這裏，標籤想表達的意思是：按照設備的寬度（device-width）來渲染網頁內容。事實上，在支持這個標籤的設備上給你看一看效果，你就明白了。

 

不錯呀！用戶體驗大大改善！！！
此時若是用document.documentElement.clientWidth來測試瀏覽器屏幕寬度，你會發現當前視口寬度等於手機屏幕的寬度，約數後的視口寬度都是在320~480之間（手機豎直使用的時候）。
這個視口的尺寸，是手機廠商設置的，可以保證咱們的文字好比16px，在本身的這個視口下清晰、大小剛剛合適。因此大屏幕的手機的約束視口 > 小屏幕手機的約束視口。這就可以保證咱們的網頁能夠用px寫字號、寫行高。
須要注意的是：約束以後的視口寬度，不是本身的分辨率！！每一個手機的分辨率，都要比本身的視口寬度大得多得多！
最最重要的一句話：前端開發工程師，絲絕不關心手機的分辨率，咱們只關心視口。

圖片

人們常說說「一圖勝千言」，確實如此。咱們網頁中關於鬆餅的文字介紹再多，也沒有圖片有吸引力。下面咱們就在頁面上方添加一張鬆餅的圖片（2000像素寬），效果相似引誘用戶往下看的大題圖。

 

哇，真是好大一張圖，它讓整個網頁看起來都失衡了，水平方向上圖片溢出了。不行，必須解決這個問題。能夠用CSS給圖片指定固定寬度，但問題是咱們想讓它能在不一樣大小的屏幕中自動縮放。好比，咱們例子中的iPhone屏幕寬度爲320像素，若是咱們把圖片設置成320像素寬，那麼iPhone屏幕旋轉後又怎麼辦呢？這時候320像素變成了480像素。
解決方案很簡單，只要一行CSS代碼就可讓圖片隨容器寬度自動縮放:

img {
max-width: 100%;
}

回到手機上，刷新頁面，結果比較符合預期了。
這裏聲明max-width規則，就是要保證全部圖片最大顯示爲其自身的100%（即最大隻能夠顯示爲自身那麼大）。此時，若是包含圖片的元素（好比包含圖片的body或div）比圖片固有寬度小，圖片會縮放佔滿最大可用空間。

爲何不用width:100%?
要實現圖片的自動縮放，也可使用更通用的 width 屬性，好比width:100%。然而，這條規則在這裏並不適用。由於這條規則會致使它顯示得跟它的容器同樣寬。在容器比圖片寬得多的狀況下，圖片會被無謂地拉伸。

手機瀏覽器內核

在移動端，僅有四個獨立的瀏覽器內核，分別爲微軟的Trident、火狐的Gecko、開源內核Webkit、Opera的Presto。
目前微軟的Trident在移動終端上主要爲WP七、8系統內置瀏覽器。Opera的Presto內核主要爲 Opera Mobile、OperaMini、歐朋瀏覽器以及歐朋HD Beta版。Webkit內核的適用範圍則較爲普遍，Android原生瀏覽器、蘋果的Safari、谷歌Chrome(Android4.0使用)都是基於Webkit開源內核開發的。

兼容的前綴：
1 -ms-
2 -moz-
3 -o-
4 -webkit-
中國用戶的瀏覽器市場份額：

近一年中國用戶的瀏覽器市場份額

 

UC、Android內置、Chrome、Safari、QQ Browser都是webkit內核，從圖上看佔了絕大部分的市場份額。
因此必定要伺候好-webkit-。 有的公司乾脆只兼容-webkit-，別的兼容好比-ms-都不寫。

流式佈局

百分比佈局也叫做流式佈局、彈性盒佈局。手機網頁沒有版心，都左右撐滿。
百分比可以設置的屬性是width、height、padding、margin。其餘屬性好比border、font-size不能用百分比設置的。

• 若是用百分比寫width，那麼指的是父元素width的百分之多少。

• 若是用百分比寫height，那麼指的是父元素height的百分之多少。

• 若是用百分比寫padding，那麼指的是父元素width的百分之多少，不管是水平的padding仍是豎直的padding。

• 若是用百分比寫margin，那麼指的是父元素width的百分之多少，不管是水平的margin仍是豎直的margin。

• 不能用百分比寫border的寬度

接下來咱們看一個例子：

div{
  width:200px;
  height:300px;
  padding:10px;
}
div p{
  width:50%;
  height:50%;
  padding:10%;   
}
/*此時p的真實寬度是多少？*/

 

此時p的真實寬度是140px*190px

媒體查詢

1.爲何響應式 Web 設計須要媒體查詢
CSS3媒體查詢可讓咱們針對特定的設備能力或條件爲網頁應用特定的CSS樣式。若是沒有媒體查詢，光用CSS是沒法大大修改網頁外觀的。這個模塊讓咱們能夠提早編寫出適應不少不可預測因素的CSS規則，好比屏幕方向水平或垂直、視口或大或小等等。彈性佈局雖然可讓設計適應較多場景，也包括某些尺寸的屏幕，但有時候確實不夠用，由於咱們還須要對佈局進行更細緻的調整。媒體查詢讓這一切成爲可能，它就至關於CSS中基本的條件邏輯。

2.媒體查詢語法
咱們在媒體查詢外面寫的第一條規則，是「基本的」樣式，它適用於任何設備。在此基礎上，咱們再爲不一樣視口、不一樣能力的設備，漸進增長不一樣的視覺效果和功能。

body {
    background-color: grey;
 } 
@media screen and (min-width:1200px){
    body{
        background-color: pink;
    }
}
 @media screen and (min-width:700px) and (max-width:1200px){
    body{
    background-color: blue;
    }
}
@media screen and (max-width:700px){
    body{
    background-color: orange;
        }
}

其中@media就表示媒體查詢，查詢如今看這個網頁的設備是什麼，以及它的寬度是多少。screen表示看這個網頁的設備是顯示器，而不是殘疾人聽力設備、也不是打印機。後面用and符號羅列全部的可能性。
值得注意：媒體查詢只能包裹選擇器，不能包裹k:v對兒。
IE六、七、8不支持媒體查詢，也爲了防止手機端的某些瀏覽器不支持媒體查詢，因此不要把全部的選擇器都放在媒體查詢裏面。

rem響應式佈局

rem響應式佈局思想

1. 通常不要給元素設置具體的寬度,可是對於一些小圖標能夠設定具體寬度值

2. 高度值能夠設置固定值,設計稿有多大,咱們就嚴格寫多大

3. 全部設置的固定值都用REM作單位(首先在HTML中設置一個基準值：PX和REM的對應比例,而後在效果圖上獲取PX值,佈局的時候轉化爲REM值)

4. JS獲取真實屏幕的寬度,讓其除以設計稿的寬度,算出比例,把以前的基準值按照比例進行從新的設定,這樣項目就能夠在移動端自適應了

什麼是rem,它與em有何區別

rem:當前頁面中元素的REM單位的樣式值都是針對於HTML元素的font-size的值進行動態計算的
em:表示父元素的字號的倍數。(特例：在text-indent屬性中，表示文字寬度)

body →font-size:20px;

→ font-size:2em; box1

→ font-size:2em; box2

→ font-size:2em; box3

 

em爲單位的時候，font-size屬性是計算後繼承，box1計算出來是40px。那麼裏面的box二、box3繼承的都是40px。em單位不只僅能夠用來設置字號，還能夠設置任何盒模型的屬性，好比width、height、padding、margin、border
rem有一點優點就是能夠和媒體查詢配合，實現響應式佈局：

@media screen and (min-width: 320px) { html {font-size: 14px;} } @media screen and (min-width: 360px) { html {font-size: 16px;} } @media screen and (min-width: 400px) { html {font-size: 18px;} }

運用場景

若是咱們作的H5頁面只在移動端訪問，這是由於REM不兼容低版本的瀏覽器。而若是移動端和PC端公用一套代碼，建議使用流式佈局。

如何作個REM響應式佈局

一、從UI設計師拿到PSD設計稿,而後在樣式中給HTML設定一個font-size的值，咱們通常都設置一個方便後面計算的值，例如：100px

html{
font-size:100px；//1rem=100px
}

二、寫頁面，寫樣式
首先按照設計稿的尺寸來寫樣式，而後在寫樣式值的時候，須要把獲得的像素值除以100計算出對應的REM的值。
值得注意的是：真實項目中外層盒子的寬度咱們通常仍是不寫固定值，沿用流式佈局法的思想，咱們用百分比的方式佈局

margin:0 0.2rem
height:3rem;

三、根據當前屏幕的寬度和設計稿的寬度來計算咱們HTML的font-size的值
例如：設計稿寬度爲640px,其中有一個部分是輪播圖，它的尺寸是600*300，在樣式中給HTML設定一個font-size的值爲100px,則輪播圖大小應該爲 6rem×3rem，那若是手機屏幕寬度爲375px,其font-size應該設置爲多少。

375/640*100->fontsize=58.59375//此時輪播圖能自適應手機屏幕大小

根據當前屏幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontsize值應該是多少，若是fontsize的值改變了，以前設定的全部REM單位的值自動會跟着放大或者縮小。能夠經過如下這段代碼實現：

但若是當前屏幕寬度大於設計稿寬度，圖片會被拉長而失真，因此以上代碼須要稍微作些修改：

//html部分
<section id="main">
<div class="box"></div>
</section>

//js部分<script>function（）{  var desW=640,  winW=document.documentElement.clientwidth,  ratio=winW/desW；  var oMain=document.getElementById（「main「）;  if(winW>desW){  oMain.style.width=desW+"px";  oMain.style.margin="0 auto";  return;}document.documentElement.style.fontSize=ratio*100+'px';}();</script>