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

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

響應式網頁設計是什么？

響應式網頁設計（Responsive Web Design，通常縮寫為 RWD），又稱為自適應網頁設計、回應式網頁設計。是一種現代網頁設計方法，該設計基于 CSS3 的媒介查詢（Media Query）特性使得網頁適應不同設備，即根據設備的分辨率和縮放自動重新布局，同時減少縮放、平移和滾動。

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

流式網格：概念要求頁面元素使用相對單位如百分比或字體排印學調整大小，而不是絕對的單位如像素或點；

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

媒體查詢：允許網頁根據訪問站點設備的特點而使用不同 CSS 樣式規則，最常用的是瀏覽器的寬度。

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

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

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

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

由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。

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

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

/* 或者實際寬度 */
#header {
  /* 根據對象實際大小自適應寬度 */
  width: auto;
}

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

注意：1em = 16px

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

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

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

#main {
  width: 100%;
}

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

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

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

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

img {
  max-width: 100%;
}

同一個 CSS 文件中，也可以根據不同的屏幕分辨率，選擇應用不同的 CSS 規則。

/* 當屏幕寬度小于 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;
}

解決方案：為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。在 #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;
}

解決方案：巧妙運用 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）網頁上鏈接圖像（HTML 標簽）

例如：

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

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

解決方案 2 ：運用 height: auto;，根據塊內內容自動調節高度。

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

解決方案 3 ：該方案與背景圖像運用的方案相似，不過沒用 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; /* 內容超出寬度時隱藏超出部分的內容 */
  text-overflow: ellipsis; /* 當對象內文本溢出時顯示省略標記（...）；需與 overflow: hidden; 一起使用。*/
}

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

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

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

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

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

解決方案 4 ：使用 :before，:after 選擇器清除浮動，只適用于非 IE 瀏覽器。使用中必須設置 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（如下圖，分別為紅、黃、藍），當分辨率較小時，三個 DIV 重新排列，排列順序變為黃、紅、藍。

解決方案：

#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%;
  }
}

補充：也可以換個思維，先做低于 678 px，再做高于 678 px。

18個詳細響應式網頁設計教程 – OPEN資訊

響應式網頁設計-騰訊ISUX

進步博客 | 關注信息無障礙！

Media Queries

首頁-Suwen

Studio Lovelock

Melanie Daveid

Esquire

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

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

把握好“寬度，位置，樣式”，響應式網頁設計（RWD）就不難了。