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

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

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

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

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

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

靈活的圖片：也以相對單位調(diào)整大?。ㄗ畲蟮?100%），以防止它們顯示在包含它們的元素外面；

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

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

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

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

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

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

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

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

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

字體也不能使用絕對大?。?b>px），而只能使用相對大?。?b>em）。

注意：1em = 16px

body {
  /* 字體大小是頁面默認(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;
}

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

#main {
  width: 100%;
}

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

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

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

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

img {
  max-width: 100%;
}

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

/* 當(dāng)屏幕寬度小于 768 像素時，
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 的值為（寬 ÷ 長）× 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)頁上鏈接圖像（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)容自動調(diào)節(jié)高度。

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

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

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

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

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

解決方案：

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

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

解決方案 1 ：讓下一個塊也浮動。

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

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

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

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

#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 */
}

例如：有三個 DIV（如下圖，分別為紅、黃、藍(lán)），當(dāng)分辨率較小時，三個 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ǔ)充：也可以換個思維，先做低于 678 px，再做高于 678 px。

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

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

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

Media Queries

首頁-Suwen

Studio Lovelock

Melanie Daveid

Esquire

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

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

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