淺析RWD

時間 2019-11-16

標籤淺析 rwd 简体版

原文原文鏈接

1、前言

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

響應式網頁設計是什麼？html

響應式網頁設計（Responsive Web Design，一般縮寫爲 RWD），又稱爲自適應網頁設計、迴應式網頁設計。是一種現代網頁設計方法，該設計基於 CSS3 的媒介查詢（Media Query）特性使得網頁適應不一樣設備，即根據設備的分辨率和縮放自動從新佈局，同時減小縮放、平移和滾動。css3

2、響應式網頁設計（RWD）的元素

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

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

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

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

3、響應式網頁設計（RWD）的基本原理

3.1 `meta` 標籤，容許頁面寬度自動調整

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!--
    這段代碼的意思是，讓 viewport 的寬度等於物理設備上的真實分辨率，不容許用戶縮放。
    
    網頁寬度默認等於屏幕寬度（width=device-width）；
    初始縮放比例（initial-scale=1.0）爲 1.0，即網頁初始大小佔屏幕面積的 100%；
    容許用戶縮放到的最小比例（minimum-scale=1.0）爲 1.0；
    容許用戶縮放到的最大比例（maximum-scale=1.0）爲 1.0；
    不容許用戶手動縮放（user-scalable=no）。
 -->

全部主流瀏覽器都支持這個設置，包括 IE9。對於那些老式瀏覽器（主要是 IE6/7/8）並不支持 Media Query。你可使用 media-queries.js 或者 respond.js 來爲 IE 添加 Media Query 支持。佈局

<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- 或者 -->

<!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

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

瞭解更多：經常使用meta整理 – SegmentFault

3.2 不使用絕對寬度

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是重要。

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

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

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

3.3 相對大小的字體

字體也不能使用絕對大小（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;
}

3.4 流式網格

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

#main {
  width: 100%;
}

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

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

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

3.5 靈活的圖片

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

img {
  max-width: 100%;
}

3.6 媒體查詢，CSS 的 `@media` 規則

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

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

  #sidebar {
    display: none;
  }
}

4、作響應式網頁設計（RWD）常遇到的幾個問題

4.1 既使用 `width: 100%;` 又使用固定的 `padding-left`／`padding-right` 時，寬度超出設備屏幕

例如：

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

4.2 圖片等比例放大、縮小

1）背景圖像（CSS `background` 屬性）

<article id="showcase"></article>

解決方案：巧妙運用 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 `<img>` 標籤）

例如：

<article id="showcase">
  <img src="images/showcase.jpg">
</article>

解決方案 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%;
}

4.3 文本超出指定寬度後用省略號代替

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

解決方案：

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

4.4 清除浮動

例如：父元素的高度沒法被撐開，影響與父元素同級的元素；與浮動元素同級的非浮動元素會跟隨其後；若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構。

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

解決方案 2 ：使用空標籤清除浮動。在全部浮動標籤後面添加一個空標籤，定義 CSS clear:both; 不過增長了無心義標籤使 HTML 結構看起來不夠簡潔。

<div style="clear:both;"></div>

解決方案 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 */
}

4.5 DIV 互換

例如：有三個 DIV（以下圖，分別爲紅、黃、藍），當分辨率較小時，三個 DIV 從新排列，排列順序變爲黃、紅、藍。

<aside id="posts">
  <article class="post post1"></article>
  <article class="post post2"></article>
  <article class="post post3"></article>
</aside>

解決方案：

#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。

5、優秀（RWD）網站

5.1 有關製做 RWD 文章推薦

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

響應式網頁設計-騰訊ISUX

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

Media Queries

5.2 優秀 RWD 網站

首頁-Suwen

Studio Lovelock

Melanie Daveid

Esquire

6、總結

一個網站如果沒有良好的用戶體驗，即使有誘人的內容也沒法很好的吸引用戶。響應式設計雖然能夠合理的呈現給咱們想要的內容，但並非將整個網頁完美的縮放給咱們。因爲移動設備屏幕大小的限制，在其上進行顯示的內容通常是通過精心篩選的。過多的內容會使頁面看起來雜亂不堪，用戶也很難找到本身想要的東西。

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

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