一、響應(yīng)式設(shè)計
頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方 面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說， 頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計和開發(fā)了。
1、響應(yīng)式與自適應(yīng)：
相同點(diǎn)：
原理是相似的，都是檢測設(shè)備，根據(jù)不同的設(shè)備采用不同的css，而且css都是采用的百分比或者相對單位，而不是固定的寬度；
不同點(diǎn)：
響應(yīng)式的模板在不同的設(shè)備上看上去是不一樣的，會隨著設(shè)備的改變而改變展示樣式；
自適應(yīng)不會，所有的設(shè)備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據(jù)設(shè)備采用不同的展示樣式
自適應(yīng)是響應(yīng)式的一個子集，是解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁。
一、響應(yīng)式
1、允許網(wǎng)頁寬度自動調(diào)整
1）設(shè)置meta標(biāo)簽，設(shè)置視圖顯示，設(shè)備的寬度（單位為縮放為100%時的CSS的像素），initial-scale頁面初始縮放程度為1.0（target density分辨率的1:1來展現(xiàn)）、maximum-scale允許的最大縮放程度（指出頁面大小與屏幕大小相比的最大乘數(shù)）、user-scalable用戶是否能改變頁面縮放程度（設(shè)置為yes則是允許用戶對其進(jìn)行改變，反之為no。）
(設(shè)置屏幕寬度為設(shè)備寬度，禁止用戶手動調(diào)整縮放)
2）媒體查詢（Media Query）設(shè)置斷點(diǎn)（設(shè)定臨界值）
/* CSS Code */
@media (min-width:最小值1) and (max-width:最大值1) {CSScontent;}
@media (min-width:最大值1 + 1) and (max-width:最大值2) {CSScontent;}
@media (min-width:最大值2 + 1) and (max-width:最大值3) {CSScontent;}
....
響應(yīng)式網(wǎng)站運(yùn)用到較多的CSS3和HTML5的屬性和標(biāo)簽，可達(dá)到較為美觀的視覺效果，但是
IE9以下的IE低版本不支持Media Query和html5，可使用cdn.bootcss.com提供的js插件，讓低版本的瀏覽器支持html5標(biāo)簽和css3媒體查詢功能。
一、自適應(yīng)
可通過控制根節(jié)點(diǎn)HTML的font-size來控制整個文檔的字體變化。
引用js控制html根節(jié)點(diǎn)的font-size的大小， 當(dāng)頁面變化的時候font-size相對應(yīng)改變大小自適應(yīng)屏幕。移動端用的比較多，主要是因為手機(jī)端的屏幕大小差異比較大，但屏幕都不是很大，但是要求網(wǎng)頁在手機(jī)上面的表現(xiàn)形式差異不大，因此自適應(yīng)在移動端
//這個是做響應(yīng)式處理
$('html').css('fontSize', document.documentElement.clientWidth / 16);
$(window).resize(function() {
$('html').css('fontSize', document.documentElement.clientWidth / 16);
})
二、流式
采用了一些設(shè)置（適當(dāng)?shù)膉s控制頁面的布局），當(dāng)寬度大于多少時怎么展示，小于多少時怎么展示，而且展示的方式向水流一樣，一部分一部分的加載。視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。比如花瓣網(wǎng)、美麗說等，在商城網(wǎng)站應(yīng)用較多。
三、固定
靜態(tài)的就是采用固定寬度進(jìn)行布局，傳統(tǒng)的網(wǎng)頁布局方式。
