響應式Web設計

本文轉載自Be For Web與自適應網頁設計（Responsive Web Design）

1. 響應式Web設計的概念

現狀：手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，並不是一件容易的事。

2010年，Ethan Marcotte提出了"響應式網頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整佈局（layout）。

他製作了一個範例，裏面是《福爾摩斯歷險記》六個主人公的頭像。
如果屏幕寬度大於1300像素，則6張圖片並排在一行。

如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。

如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。

如果屏幕寬度在400像素以下，則6張圖片分成三行。

2. 響應式網頁的實現

首先，在網頁代碼的頭部，加入一行viewport標籤

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，最大縮放比例（maxmum-scale=1）爲1.0，最小縮放比例（minmum-scale=1）爲1.0，用戶不可以調整縮放比例，即網頁初始大小佔屏幕面積的100%。

所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js

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

不使用絕對寬度

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

具體說，CSS代碼不能指定像素寬度：

width:xxx px;

只能指定百分比寬度：

width: xx%;

或者

width:auto;

字體使用相對大小

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

body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。

h1 {
　　　　font-size: 1.5em; 
}

然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。

small {
　　　　font-size: 0.875em;
}

small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

流動佈局（fluid grid）

"流動佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.main {
　　float: right;
　　　　width: 70%; 
}

.leftBar {
　　float: left;
　　width: 25%;
}

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

另外，絕對定位（position: absolute）的使用，也要非常小心。

選擇加載CSS

"響應式網頁設計"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，然後加載相應的CSS文件。

<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。

<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

除了用html標籤加載CSS文件，還可以在現有CSS文件中加載。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

CSS的@media規則

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

@media screen and (max-device-width: 400px) {

　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}

}

上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

圖片的自適應

除了佈局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

這隻要一行CSS代碼：

img { max-width: 100%;}

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

　　　　var imgs = document.getElementById("content").getElementsByTagName("img");

　　　　imgSizer.collate(imgs);

});

3. 通過CSS3 Media Query實現響應式Web設計實例

最終效果範例

首先來看看本篇範例的最終效果演示。打開該頁面，拖拽瀏覽器邊框，將窗口慢慢縮小，同時觀察頁面結構及元素佈局是怎樣基於寬度變化而自動響應調整的。

其他使用media query的方式設計了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等

方法概述

我們將範例頁面的父級容器寬度設置爲固定的980px，對於桌面瀏覽環境，該寬度適用於任何寬於1024像素的分辨率。我們通過media query來監測那些寬度小於980px的設備分辨率，並將頁面的寬度設置由“固定”方式改爲“液態”，佈局元素的寬度隨着瀏覽器窗口的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置於主內容部分的下方，整個頁面變爲單欄佈局。

頁面基本元素框架構建

html代碼

我們將把注意力集中在頁面的主要佈局方面，並使用HTML5標籤來更加語義化的實現這些結構，包括頁頭、主要內容部分、側邊欄和頁腳：

<div id="pagewrap">
 
    <header id="header">
        <hgroup>
            <h1 id="site-logo">Demo</h1>
            <h2 id="site-description">Site Description</h2>
        </hgroup>
        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
            </ul>
        </nav>
        <form id="searchform">
            <input type="search">
        </form>
    </header>
     
    <div id="content">
        <article class="post">
            blog post
        </article>
    </div>
     
    <aside id="sidebar">
        <section class="widget">
             widget
        </section>
    </aside>
 
    <footer id="footer">
        footer
    </footer>
     
</div>

html5.js

IE是永恆的話題；對於我們使用的HTML5標籤，IE9之前的版本無法提供支持。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器創建HTML5元素節點。在我們的頁面HTML代碼中調用該JS文件：

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

CSS

HTML5塊級元素樣式

首先仍是瀏覽器兼容問題。雖然我們已經可以在低版本的IE中創建HTML5元素節點，但還是需要在樣式方面做些工作，將這些“新”元素聲明爲塊級：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主要結構的CSS

忽略細節，我們仍是將注意力集中在大問題上。正如在前文“概述”中提到的，默認情況下頁面容器的固定寬度爲980像素，頁頭部分(header)的固定高度爲160像素；主要內容部分(content)的寬度爲600像素，左浮動；側邊欄(sidebar)右浮動，寬度爲280像素。

#pagewrap {
    width: 980px;
    margin: 0 auto;
}
 
#header {
    height: 160px;
}
 
#content {
    width: 600px;
    float: left;
}
 
#sidebar {
    width: 280px;
    float: right;
}
 
#footer {
    clear: both;
}

目前效果

目前我們只是初步完成了頁面結構的HTML和默認結構樣式，當然，並不包括那些與話題無關的細節實現問題。正如可以在目前的演示中看到的，由於還沒有做任何media query方面的工作，頁面還不能隨着瀏覽器尺寸的變化而改變佈局。

使用CSS3 Media Query

首先我們需要在頁面中調用css3-mediaqueries.js文件，來幫助IE8或是之前的版本支持CSS3 media queries：

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

接下來，我們要創建CSS樣式表，並在頁面中調用：

<link href="media-queries.css" rel="stylesheet" type="text/css">

當瀏覽器可視部分寬度大於650px小於980px時(液態佈局)

將pagewrap的寬度設置爲95%
將content的寬度設置爲60%
將sidebar的寬度設置爲30%

@media screen and (max-width: 980px) {
 
    #pagewrap {
        width: 95%;
    }
 
    #content {
        width: 60%;
        padding: 3% 4%;
    }
 
    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        padding: 8% 7%;
        margin-bottom: 10px;
    }
}

當瀏覽器可視部分寬度小於650px時(單欄佈局)

將header的高度設置爲auto
將searchform絕對定位在top 5px的位置
將main-nav、site-logo、site-description的定位設置爲static
將content的寬度設置爲auto(主要內容部分的寬度將擴展至滿屏)，並取消float設置
將sidebar的寬度設置爲100%，並取消float設置

@media screen and (max-width: 650px) {
 
    #header {
        height: auto;
    }
 
    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }
 
    #main-nav {
        position: static;
    }
 
    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }
 
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
 
    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }
 
    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }
}

當瀏覽器可視部分寬度小於480px時

480px也就是iPhone橫屏時的寬度。當可視部分的寬度小於該數值時，我們需要做以下調整：

禁用html節點的字號自動調整。默認情況下，iPhone會將過小的字號放大，我們可以通過-webkit-text-size-adjust屬性進行調整。
將main-nav中的字號設置爲90%

@media screen and (max-width: 480px) {
 
    html {
        -webkit-text-size-adjust: none;
    }
 
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
}

彈性圖片

我們需要爲圖片設置max-width: 100%和height: auto，來實現其彈性化。對於IE，仍然需要一點額外的工作：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

彈性內嵌視頻

同樣的，對於視頻，我們也需要做max-width: 100%的設置；但是Safari對embed的該屬性支持不是很給力，所以我們以width: 100%來代替：

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

iPhone中的初始化縮放

默認情況下，iPhone中的Safari瀏覽器會對頁面進行自動縮放，以適應屏幕尺寸。我們可以使用以下的meta設置，將設備的默認寬度作爲頁面在Safari的可視部分寬度，並禁止初始化縮放。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

4. 要點總結

Media Query JavaScript

對於那些尚不支持media query的瀏覽器，我們要在頁面中調用css3-mediaqueries.js

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

CSS Media Queries

實現自適應頁面設計的關鍵之一，就是使用CSS根據分辨率寬度的變化來調整頁面佈局結構。

@media screen and (max-width: 560px) {
 
    #content {
        width: auto;
        float: none;
    }
 
    #sidebar {
        width: 100%;
        float: none;
    }
 
}

彈性圖片

通過max-width: 100%和height: auto實現圖片的彈性化。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

彈性內嵌元素(視頻)

通過width: 100%和height: auto實現內嵌元素的彈性化。

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

字號自動調整的問題

通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調整

html {
    -webkit-text-size-adjust: none;
}

頁面寬度縮放的問題

<meta name="viewport" content="width=device-width; initial-scale=1.0">

是月流光

發佈了28 篇原創文章 · 獲贊 210 · 訪問量 4萬+

私信關注

響應式Web設計

1. 響應式Web設計的概念

2. 響應式網頁的實現

首先，在網頁代碼的頭部，加入一行viewport標籤

不使用絕對寬度

字體使用相對大小

流動佈局（fluid grid）

選擇加載CSS

CSS的@media規則

圖片的自適應

3. 通過CSS3 Media Query實現響應式Web設計實例

最終效果範例

方法概述

頁面基本元素框架構建

使用CSS3 Media Query

4. 要點總結

Media Query JavaScript

CSS Media Queries

彈性圖片

彈性內嵌元素(視頻)

字號自動調整的問題

頁面寬度縮放的問題

mysql開啓遠程訪問權限

Windows10恢復任務欄中的“中/英”切換圖標

git的下載與安裝指南

Xftp無法往桌面拖放文件問題及解決方案

響應式Web設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結