一，自適應(yīng)和響應(yīng)式的區(qū)別

    自適應(yīng)是一套模板適應(yīng)所有終端，但每種設(shè)備上看到的版式是一樣的，俗稱寬度自適應(yīng)。

    響應(yīng)式一套模板適應(yīng)所有終端，但每種設(shè)備看到的版式可以是不一樣的。

雖然響應(yīng)式/自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)會(huì)帶來(lái)兼容各種設(shè)備工作量大、代碼累贅、加載時(shí)間長(zhǎng)的缺點(diǎn)，但它們跨平臺(tái)和終端，能“一次設(shè)計(jì)，普遍適用”，可以根據(jù)屏幕分辨率自適應(yīng)以及自動(dòng)縮放圖片、自動(dòng)調(diào)整布局，它們不只是技術(shù)的實(shí)現(xiàn)，更多的是對(duì)于設(shè)計(jì)的全新思維模式。

很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專門提供一個(gè)mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時(shí)要維護(hù)好幾個(gè)版本，而且如果一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

自適應(yīng)還是暴露出一個(gè)問(wèn)題，如果屏幕太小，即使網(wǎng)頁(yè)能夠根據(jù)屏幕大小進(jìn)行適配，但是會(huì)感覺(jué)在小屏幕上查看，內(nèi)容過(guò)于擁擠，響應(yīng)式正是為了解決這個(gè)問(wèn)題而衍生出來(lái)的概念。它可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)，布局和展示的內(nèi)容可能會(huì)有所變動(dòng)。

自適應(yīng)的體驗(yàn)http://m.ctrip.com/html5/  響應(yīng)式的體驗(yàn) http://segmentfault.com/

Css秘密花園http://www.csszengarden.com/

http://caibaojian.com/demo/ued/

二，響應(yīng)式基礎(chǔ)知識(shí)

1，設(shè)置meta標(biāo)簽

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

這段代碼的幾個(gè)參數(shù)解釋：

§width = device-width：寬度等于當(dāng)前設(shè)備的寬度

§initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0） 

§minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）   

§maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）  

§user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁(yè)面）

    2，媒體查詢css3的媒體查詢是響應(yīng)式設(shè)計(jì)能實(shí)現(xiàn)的關(guān)鍵因素。你可以使用媒體查詢的特性，來(lái)根據(jù)設(shè)備的寬度，讓頁(yè)面使用不同的css塊。

如下的css規(guī)則會(huì)在屏幕寬度小于等于980時(shí)起作用：

@media (orientation:portrait) and (max-width:460px) {    .video .innerBox .news a.more {        display: none;    }    .video .innerBox .news span {        display: none;    }    .video .innerBox .news {        width: 100%;    }    .video .innerBox .news ul {        width: 100%;        text-align: center;    }} 

　orientation：portrait | landscape

portrait：

指定輸出設(shè)備中的頁(yè)面可見區(qū)域高度大于或等于寬度

landscape：

除portrait值情況外，都是landscape

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

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

3，百分比布局

三，響應(yīng)式頁(yè)面設(shè)計(jì)，字體，圖片的處理

1，html5/css3響應(yīng)式頁(yè)面的設(shè)計(jì)流程

第一步：確定需要兼容的設(shè)備類型、屏幕尺寸類型：包括移動(dòng)設(shè)備（手機(jī)、平板）和pc。對(duì)于移動(dòng)設(shè)備，設(shè)計(jì)和實(shí)現(xiàn)的時(shí)候注意增加手勢(shì)的功能。

屏幕尺寸：包括各種手機(jī)屏幕的尺寸（包括橫向和豎向）、各種平板的尺寸（包括橫向和豎向）、普通電腦屏幕和寬屏。

第二步：針對(duì)確定下來(lái)的幾個(gè)尺寸分別制作不同的線框原型，需要考慮清楚不同尺寸下，頁(yè)面的布局如何變化，內(nèi)容尺寸如何縮放，功能、內(nèi)容的刪減，甚至針對(duì)特殊的環(huán)境作特殊化的設(shè)計(jì)等。這個(gè)過(guò)程需要設(shè)計(jì)師和前端開發(fā)人員保持密切的溝通。

第三步：視覺(jué)設(shè)計(jì)，將圖片導(dǎo)入到相應(yīng)的設(shè)備進(jìn)行一些簡(jiǎn)單的測(cè)試，可幫助我們盡早發(fā)現(xiàn)可訪問(wèn)性、可讀性等方面存在的問(wèn)題。

與傳統(tǒng)的web開發(fā)相比，響應(yīng)式設(shè)計(jì)的頁(yè)面由于頁(yè)面布局、內(nèi)容尺寸發(fā)生了變化，所以最終的產(chǎn)出更有可能與設(shè)計(jì)稿出入較大，需要前端開發(fā)人員和設(shè)計(jì)師多溝通。

2，響應(yīng)式字體

CSS中幾種不同單位之間的比較

px：像素（Pixel）。相對(duì)長(zhǎng)度單位，所占大小由屏幕分辨率決定。（配合媒體查詢）

em：相對(duì)長(zhǎng)度單位。相當(dāng)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，如果當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。em的值并不是固定的，它會(huì)繼承父級(jí)元素的字體大小。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡(jiǎn)化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。

rem：CSS3新增的一個(gè)相對(duì)單位。與em的主要區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。

%：另外我們還可以使用百分比來(lái)指定大小，它表示當(dāng)前字體相對(duì)于瀏覽器默認(rèn)字體大小的倍數(shù)。該單位在頁(yè)面響應(yīng)式設(shè)計(jì)中也被經(jīng)常用到。  

html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem ;/* 12÷10=1.2 */}p{font-size:14px;font-size:1.4rem;}

需要注意的是，為了兼容不支持 rem 的瀏覽器，我們需要在 rem 前面寫上對(duì)應(yīng)的 px 值，這樣不支持的瀏覽器可以優(yōu)雅降級(jí)。其實(shí)不用太糾結(jié)是默認(rèn)的 font-size:100%，還是設(shè)置為 font-size:62.5%，如果你引入了 CSS 預(yù)處理工具那么自然可以使用默認(rèn)值，如果由于其他原因使用 font-size:62.5% 也無(wú)可厚非，完全可以在 body 中重置回你需要的默認(rèn) font-size。 

3，響應(yīng)式圖片視頻處理  

http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#  

1.背景圖片----媒體查詢  

2.圖片液態(tài)化----彈性圖片  

img, object { max-width: 100%;}https://www.filamentgroup.com/examples/responsive-images/

3.HTML5 <picture> 元素 

HTML5 的 <picture> 元素可以設(shè)置多張圖片。  

瀏覽器支持  

<picture>    <source srcset="images/img_smallflower.jpg" media="(max-width: 400px)">    <source srcset="images/img_flowers.jpg">    <img src="images/img_flowers.jpg" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";">	
<script src="http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js"></script> 

4.使用noscript標(biāo)簽創(chuàng)建響應(yīng)圖片  

Js動(dòng)態(tài)加載大小圖片  

<span class="img-placeholder"></span><noscript data-mobilesrc="small.jpg" data-fullsrc="big.jpg" data-alttext="your alt text" class="responsivize">   <img src="big.jpg"></noscript> <script type="text/javascript">var responsiveImageTag = {    replaceInitialImages:function(respons) {        var platform = "desktop";        var resImage = '.'+respons;        var responsiveImages = $(resImage);        var i,            noOfresponsiveImages = responsiveImages.length;        //當(dāng)前顯示器設(shè)備寬度測(cè)試        if(screen.width <= 767){                 //767px, 比 ipad 小的都認(rèn)為是 mobile          platform = "mobile";        }        //set initial source element on image        for(i = 0; i < noOfresponsiveImages; i = i + 1 ){           var noScriptElem = $(responsiveImages[i]);           var img = window.document.createElement("img");           img.alt = noScriptElem.attr("data-alttext");           if(platform === "mobile"){              img.src = noScriptElem.attr("data-mobilesrc");           }else{              img.src = noScriptElem.attr("data-fullsrc");           }           img.className = "responsive";           $('.img-placeholder').eq(i).html('').append(img);              noScriptElem.hide();        }   }};responsiveImageTag.replaceInitialImages('responsivize');$(window).resize(function(){    responsiveImageTag.replaceInitialImages('responsivize');});</script>

四，響應(yīng)式框架  

定制化：如果你的網(wǎng)站有大量多樣化的設(shè)計(jì)，那么當(dāng)你如果還想使用bootstrap就需要將框架作為底層修改：需要復(fù)寫大量樣式，CSS層次編的混亂，難以維護(hù)。  

在一些場(chǎng)合，bootstrap是非常有用的。比如你想快速搭建一個(gè)比較漂亮的個(gè)人站企業(yè)站博客后臺(tái)管理界面等對(duì)頁(yè)面定制化需求不高的項(xiàng)目 往往更適合后臺(tái)項(xiàng)目 多數(shù)后臺(tái)系統(tǒng) 瀏覽器兼容好讓步 樣式也好讓步 不太會(huì)細(xì)摳細(xì)節(jié)。或者你可能在構(gòu)建網(wǎng)站前端、考慮瀏覽器兼容性和數(shù)不勝數(shù)的設(shè)備尺寸上缺乏經(jīng)驗(yàn)，bootstrap會(huì)幫你解決很大一部分麻煩的問(wèn)題