摘要：三響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基本原理標(biāo)簽，允許頁(yè)面寬度自動(dòng)調(diào)整大多數(shù)移動(dòng)瀏覽器將頁(yè)面放大為寬的視圖以符合屏幕分辨率。解決方案使用，選擇器清除浮動(dòng)，只適用于非瀏覽器。由于移動(dòng)設(shè)備屏幕大小的限制，在其上進(jìn)行顯示的內(nèi)容一般是經(jīng)過(guò)精心篩選的。

現(xiàn)今，無(wú)論是移動(dòng)設(shè)備、平板電腦、PC，屏幕大小各不相同，若是針對(duì)每個(gè)屏幕大小多帶帶設(shè)計(jì)一個(gè)解決方案，則會(huì)大幅增加網(wǎng)站建設(shè)的復(fù)雜程度和運(yùn)營(yíng)成本。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念就是可以讓網(wǎng)頁(yè)根據(jù)用戶的使用環(huán)境進(jìn)行自動(dòng)調(diào)整，有效的改善用戶體驗(yàn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是什么？

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design，通常縮寫(xiě)為 RWD），又稱為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。是一種現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)方法，該設(shè)計(jì)基于 CSS3 的媒介查詢（Media Query）特性使得網(wǎng)頁(yè)適應(yīng)不同設(shè)備，即根據(jù)設(shè)備的分辨率和縮放自動(dòng)重新布局，同時(shí)減少縮放、平移和滾動(dòng)。

流動(dòng)網(wǎng)格（Fluid Grids），靈活的圖片（Flexible Images）和媒體查詢（Media Queries）是對(duì)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的三種技術(shù)元素，但它們也是需要不同想法的方式。

流式網(wǎng)格：概念要求頁(yè)面元素使用相對(duì)單位如百分比或字體排印學(xué)調(diào)整大小，而不是絕對(duì)的單位如像素或點(diǎn)；

靈活的圖片：也以相對(duì)單位調(diào)整大小（最大到 100%），以防止它們顯示在包含它們的元素外面；

媒體查詢：允許網(wǎng)頁(yè)根據(jù)訪問(wèn)站點(diǎn)設(shè)備的特點(diǎn)而使用不同 CSS 樣式規(guī)則，最常用的是瀏覽器的寬度。

大多數(shù)移動(dòng)瀏覽器將 HTML 頁(yè)面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的 meta 標(biāo)簽來(lái)進(jìn)行重置。在 標(biāo)簽里加入這個(gè) meta 標(biāo)簽。

所有主流瀏覽器都支持這個(gè)設(shè)置，包括 IE9。對(duì)于那些老式瀏覽器（主要是 IE6/7/8）并不支持 Media Query。你可以使用 media-queries.js 或者 respond.js 來(lái)為 IE 添加 Media Query 支持。

注意：很多人使用 initial-scale=1.0 到非響應(yīng)式網(wǎng)站上，這會(huì)讓網(wǎng)站以 100% 寬度渲染，用戶需要手動(dòng)移動(dòng)頁(yè)面或者縮放。如果和 initial-scale=1.0 同時(shí)使用 user-scalable=no 或 maximum-scale=1.0，則用戶將不能放大/縮小網(wǎng)頁(yè)來(lái)看到全部的內(nèi)容。

了解更多：常用meta整理 – SegmentFault

由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要。

/* CSS 代碼不能指定像素寬度 */
#header {
  width: 1024px;
}

/* 只能指定百分比寬度 */
#header {
  /* 設(shè)定對(duì)象的寬度占父元素 100% */
  width: 100%;
}

/* 或者實(shí)際寬度 */
#header {
  /* 根據(jù)對(duì)象實(shí)際大小自適應(yīng)寬度 */
  width: auto;
}

字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大小（em）。

注意：1em = 16px

body {
  /* 字體大小是頁(yè)面默認(rèn)大小的 100%，即 16 像素 */
  font: normal 100% "Microsoft YaHei",Arial,Helvetica,sans-serif;
}

h1 {
  /* h1的大小是默認(rèn)大小的 1.5 倍，即 24 像素（24 / 16 = 1.5） */
  font-size: 1.5em;
}

各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

#main {
  width: 100%;
}

#content {
  float: left;
  width: 75%;
}

#sidebar {
  float: left;
  width: 25%;
}

浮動(dòng)的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向 overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

除了布局和文本，RWD 還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。

img {
  max-width: 100%;
}

同一個(gè) CSS 文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的 CSS 規(guī)則。

/* 當(dāng)屏幕寬度小于 768 像素時(shí)，
content 塊寬度為 100%（width: 100%），sidebar 塊不顯示（display: none） */
@media screen and (max-width: 768px) {
  #content {
    width: 100%;
  }

  #sidebar {
    display: none;
  }
}

例如：

#header {
  padding: 0 200px;
  width: 100%;
  height: 50px;
  background: #fff;
}

解決方案：為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。在 #header 中加入 CSS3 box-sizing 屬性，將其屬性值置為 border-box。

#header {
  box-sizing: border-box;
  padding: 0 200px;
  width: 100%;
  height: 50px;
  background: #fff;
}

讓所有的元素都使用 border-box，并且包括偽類 :before、:after。

*, *:before, *:after {
  box-sizing: border-box;
}

解決方案：巧妙運(yùn)用 padding-bottom 或者 padding-top。比如一張照片分辨率為 1440 × 552，那么 padding-bottom 或者 padding-top 的值為（寬 ÷ 長(zhǎng)）× 100% = 38.333333% 。

#showcase {
  padding-bottom: 38.333333%;
  width: 100%;
  height: 0;
  background: url(../images/showcase.jpg) no-repeat center center / cover;
}

2）網(wǎng)頁(yè)上鏈接圖像（HTML 標(biāo)簽）

例如：

解決方案 1 ：巧妙運(yùn)用 CSS max-height 屬性，定義元素的最大高度值。

#showcase img {
  width: 100%;
  max-height: 552px;
}

解決方案 2 ：運(yùn)用 height: auto;，根據(jù)塊內(nèi)內(nèi)容自動(dòng)調(diào)節(jié)高度。

#showcase2 img {
  width: 100%;
  height: auto;
}

解決方案 3 ：該方案與背景圖像運(yùn)用的方案相似，不過(guò)沒(méi)用 CSS position 屬性的話，高度增加一倍。

#showcase3 {
  position: relative;
  padding-bottom: 38.333333%;
  width: 100%;
  height: 0;
}

#showcase3 img {
  position: absolute;
  width: 100%;
  height: 100%;
}

例如：h1 不換行，文本超出部分用省略號(hào)代替。

解決方案：

h1 {
  word-break: keep-all; /* 不換行 */
  white-space: nowrap; /* 不換行 */
  overflow: hidden; /* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
  text-overflow: ellipsis; /* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）；需與 overflow: hidden; 一起使用。*/
}

例如：父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素；與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后；若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)。

解決方案 1 ：讓下一個(gè)塊也浮動(dòng)。

解決方案 2 ：使用空標(biāo)簽清除浮動(dòng)。在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽，定義 CSS clear:both; 不過(guò)增加了無(wú)意義標(biāo)簽使 HTML 結(jié)構(gòu)看起來(lái)不夠簡(jiǎn)潔。

解決方案 3 ：使用 overflow，給包含浮動(dòng)元素的父標(biāo)簽添加 CSS 屬性 overflow: auto; zoom: 1;。zoom: 1; 用于兼容 IE6。

#parent {
  overflow: auto;
  zoom: 1;
}

解決方案 4 ：使用 :before，:after 選擇器清除浮動(dòng)，只適用于非 IE 瀏覽器。使用中必須設(shè)置 height: 0;，否則該元素會(huì)比實(shí)際高出若干像素。

#parent:before, #parent:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

#parent:after {
  clear: both;
}

#parent {
  zoom: 1; /* 兼容IE < 8 */
}

/* 或者 */
#parent:before, #parent:after {
  content: "";
  display: table;
}

#parent:after {
  clear: both;
  overflow: hidden;
}

#parent {
  zoom: 1; /* 兼容IE < 8 */
}

例如：有三個(gè) DIV（如下圖，分別為紅、黃、藍(lán)），當(dāng)分辨率較小時(shí)，三個(gè) DIV 重新排列，排列順序變?yōu)?strong>黃、紅、藍(lán)。

解決方案：

#posts {
  position: relative;
  width: 100%;
}

.post {
  position: absolute;
  float: left;
  width: 33.333333%;
  height: 200px;
}

.post1 {
  margin-left: 0%;
  background: red;
}

.post2 {
  margin-left: 33.333333%;
  background: yellow;
}

.post3 {
  margin-left: 66.666666%;
  background: blue;
}

@media screen and (max-width: 678px) {
  .post {
    width: 100%;
  }

  .post1 {
    margin-top: 200px;
    margin-left: 0%;
  }

  .post2 {
    margin-top: 0;
    margin-left: 0%;
  }

  .post3 {
    margin-top: 400px;
    margin-left: 0%;
  }
}

補(bǔ)充：也可以換個(gè)思維，先做低于 678 px，再做高于 678 px。

18個(gè)詳細(xì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)教程 – OPEN資訊

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)-騰訊ISUX

進(jìn)步博客 | 關(guān)注信息無(wú)障礙！

Media Queries

首頁(yè)-Suwen

Studio Lovelock

Melanie Daveid

Esquire

一個(gè)網(wǎng)站若是沒(méi)有良好的用戶體驗(yàn)，即便有誘人的內(nèi)容也無(wú)法很好的吸引用戶。響應(yīng)式設(shè)計(jì)雖然可以合理的呈現(xiàn)給我們想要的內(nèi)容，但并不是將整個(gè)網(wǎng)頁(yè)完美的縮放給我們。由于移動(dòng)設(shè)備屏幕大小的限制，在其上進(jìn)行顯示的內(nèi)容一般是經(jīng)過(guò)精心篩選的。過(guò)多的內(nèi)容會(huì)使頁(yè)面看起來(lái)雜亂不堪，用戶也很難找到自己想要的東西。

比較好的做法是留下少部分最重要的內(nèi)容直接進(jìn)行展示，其余的部分可以先隱藏起來(lái)，用戶點(diǎn)擊時(shí)再展開(kāi)。這樣信息都保留在了頁(yè)面上，但是不要一次性的全都推到用戶面前，用戶可以按需索取想要了解的內(nèi)容。對(duì)于移動(dòng)設(shè)備流量上的考慮，可以設(shè)計(jì)成 AJAX 模式，而不是預(yù)先加載所有的頁(yè)面數(shù)據(jù)，這樣可以節(jié)省一部分的流量。

把握好“寬度，位置，樣式”，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）就不難了。