1、什么是響應(yīng)式布局 Responsive Design
我們開(kāi)發(fā)的頁(yè)面在不同設(shè)備上都能良好展示，常用的設(shè)備：pc、平板、手機(jī)、ipod ...
2、meta便簽中的viewport：
在PC端，一個(gè)頁(yè)面的寬度(HTML的寬度)與瀏覽器的可視窗口寬度是一致的，且PC端的瀏覽器我們可以調(diào)節(jié)大小，手機(jī)端的瀏覽器和手機(jī)的寬度是保持一致的，且一般情況下不能調(diào)節(jié)大小。移動(dòng)端HTML頁(yè)面的寬度和瀏覽器(或者手機(jī))的寬度沒(méi)有必然的聯(lián)系，一般HTML的寬度都是980/1024寬度
我們平時(shí)用手機(jī)瀏覽器訪問(wèn)一個(gè)pc端HTML頁(yè)面,發(fā)現(xiàn)內(nèi)容都縮小了：就是因?yàn)槭謾C(jī)只有320寬度，但是頁(yè)面的寬度確有980，這樣如果把一個(gè)頁(yè)面都要看全的話，只能縮小大概三倍左右
=>解決方案
HTML的寬度應(yīng)該和手機(jī)保持一致，這樣的話就不會(huì)縮小了，這樣的話我們需要給HTML頁(yè)面設(shè)置一個(gè)META標(biāo)簽：
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
- viewport：視口,設(shè)置當(dāng)前瀏覽器按照多大的寬度來(lái)渲染頁(yè)面(或者說(shuō)讓HTML頁(yè)面有多寬)
- width=device-width 設(shè)置一個(gè)HTML頁(yè)面的總寬度和設(shè)備的寬度(手機(jī)的寬度)保持一致
- user-scalable=no 禁止用戶手動(dòng)縮放
- initial-scale=1.0 / maximum-scale=1.0 / minimum-scale=1.0：設(shè)置頁(yè)面的初始(最大、最小)縮放比例都是1:1的(既不放大也不縮小)
以后只要是做移動(dòng)端的產(chǎn)品(只要頁(yè)面需要在手機(jī)上訪問(wèn))，這個(gè)meta 必須要加
layout viewport：布局視口(我們?cè)O(shè)定的就是它)
visual viewport
ideal viewport
詳情見(jiàn)：http://www.cnblogs.com/2050/p/3877280.html
3、媒體查詢@media
我們按照上述的原理，增加了viewport，頁(yè)面內(nèi)容不縮小了，但是出現(xiàn)了橫向的滾動(dòng)條，why?
=>原因
HTML的寬度：320（頁(yè)面寬度320）
但是它里面文章article(內(nèi)容)卻有800的寬度，屬于內(nèi)容超出，所以出現(xiàn)了橫向的滾動(dòng)條
=>解決
article的寬度和html的寬度保持一致，不讓內(nèi)容超出頁(yè)面，但是這樣的設(shè)置需要在HTML的寬度小于800PX的時(shí)候在設(shè)置，大于800的時(shí)候(PC)，我們寫(xiě)固定的樣式值也沒(méi)有問(wèn)題(內(nèi)容不會(huì)超出)，這時(shí)就需要查詢?cè)O(shè)備寬度（） =>"媒體查詢@media"
媒體設(shè)備：
all ->所有設(shè)備
screen ->所有屏幕設(shè)備(PC、PAD、PHONE...)
print ->打印機(jī)設(shè)備
...
媒體條件：
width:800px HTML的寬度為800PX
max-width：800px HTML的寬度小于等于800PX
min-width：320px HTML的寬度大于等于320PX
device-width：設(shè)備寬度
max-device-width
min-device-width
orientation:landscape(橫屏) | portrait(豎屏)
-webkit-device-pixel-ratio：屏幕像素密度比
@media all and (max-width:800px) and (min-width:640px){
符合該媒體查詢條件的設(shè)備執(zhí)行這里面的樣式
.article{}
}
@media screen and (orientation:landscape){
}
@media screen and (-webkit-device-pixel-ratio:2){
}
總結(jié)：
1、增加viewport
2、使用媒體查詢，在指定的條件下調(diào)整樣式
對(duì)于外層容器來(lái)說(shuō)，不能設(shè)置具體的寬度了，需要使用百分比
其余的樣式都是寫(xiě)具體的值，如果在某一個(gè)尺寸感覺(jué)不太方便閱讀，我們?cè)谑褂妹襟w查詢細(xì)微調(diào)整即可
=>這種響應(yīng)式布局方案就是“流式布局法(媒體查詢法)” 核心：寬度不固定(百分比)，其余都固定，不好在調(diào)整
4、項(xiàng)目中的移動(dòng)端產(chǎn)品形態(tài)
->PC端和移動(dòng)端用的是同一套產(chǎn)品:
1)流式布局
2)先按照PC端寫(xiě)，寬度可以寫(xiě)死，也可以寫(xiě)成百分比
3)在手機(jī)端使用@media在一點(diǎn)點(diǎn)的調(diào)整
->PC端和移動(dòng)端用的是不同的產(chǎn)品,PC端一套,移動(dòng)端是單獨(dú)的一套:
1)PC端做的時(shí)候不需要考慮響應(yīng)式(所有的尺寸按照設(shè)計(jì)稿寫(xiě)死即可)
2)移動(dòng)端的項(xiàng)目需要做響應(yīng)式適應(yīng)不同的手機(jī)，但是不需要考慮PC了(有些公司會(huì)針對(duì)pad在出一套)，可用rem布局或或流式布局
->流式布局：
->REM
5、移動(dòng)端設(shè)計(jì)稿一般都是多大的？
640960 ->iphone4 (320480)
6401136 ->iphone5 (320568)
7501334 ->iphone6 (375667)
給我們的設(shè)計(jì)稿都是比真實(shí)的手機(jī)尺寸擴(kuò)大二倍來(lái)做的(高度可以忽略不管，但是寬度必須是640或者750)
DPR適配：屏幕像素密度比
目前大部分手機(jī)的屏幕像素密度比都是2倍/3倍的在二倍或者更高倍數(shù)的屏幕像素密度比例下，我們?nèi)庋劭吹降母忧逦?br>
iphone3 ：320480 分辨率 320480
iphone4 ：320480 分辨率 640960
6、三種響應(yīng)式布局
設(shè)計(jì)師給我們一個(gè)設(shè)計(jì)稿：640*960
-
->流式布局法：
1)寬度百分比自適應(yīng)的
2)其余的尺寸都按照設(shè)計(jì)稿中的尺寸的一半來(lái)寫(xiě)，假設(shè)：設(shè)計(jì)稿中 高度是100px，字體大小是36PX，邊框是2PX 我們寫(xiě)的時(shí)候?qū)懀?box{ height:50px; font-size:18px; border:1px solid red; ... }問(wèn)題：
設(shè)計(jì)師設(shè)計(jì)的尺寸不應(yīng)該出現(xiàn)奇數(shù)
“一像素邊框問(wèn)題”：設(shè)計(jì)師設(shè)計(jì)的邊框大小是1PX，我們布局的時(shí)候?qū)?5PX，瀏覽器不支持半像素的，如何處理？ => transform:scale(0.5) ->等比縮放布局(已經(jīng)被PASS了)
我們布局的時(shí)候嚴(yán)格按照設(shè)計(jì)稿的尺寸來(lái)寫(xiě)，例如：設(shè)計(jì)稿中是 300*100 F:36 M:20我們寫(xiě)的時(shí)候
.box{
width:300px;
height:100px;
font-size:36px;
margin:20px;
...
}
JS:
var winW=document.documentElement.clientWidth;
var n=winW/640; //->0.5 或者其他的比例
document.body.style.transform='scale('+n+')';
- ->REM(等比縮放思想的升級(jí)和目前最流行的響應(yīng)式布局方式)
PX：固定單位，我們寫(xiě)多大的值，以后不管當(dāng)前頁(yè)面有多寬多高，它依然是這樣的值；如果想要它改變的化，我們需要手動(dòng)一個(gè)個(gè)的去調(diào)整
REM：相對(duì)單位，相對(duì)于當(dāng)前頁(yè)面根元素(HTML)字體大小設(shè)定的，例如：
html{
font-size:12px; //->1REM = 12PX 一個(gè)頁(yè)面默認(rèn)根元素字體大小16PX(谷歌)
}
.box{
width:10rem; //->120PX
}
以后只要我們改變HTML的font-size，所有以REM為單位的值都會(huì)跟著改
7、真實(shí)項(xiàng)目中如何使用REM做響應(yīng)式布局開(kāi)發(fā)：
設(shè)計(jì)稿：640*960
1、不管以后在什么樣的手機(jī)上運(yùn)行，我們只需要嚴(yán)格按照設(shè)計(jì)稿中標(biāo)注的尺寸來(lái)開(kāi)發(fā)即可
->設(shè)置HTML的font-size:100px =>1REM=100PX =>640的設(shè)計(jì)稿中是這樣換算比例
->設(shè)計(jì)稿中的尺寸是多大，我們布局的時(shí)候就寫(xiě)多大，但是需要把所有量出來(lái)的PX都除以100變換成REM為單位的值
2、在JS中獲取當(dāng)前手機(jī)寬度，例如獲取的是320PX
640 1rem->100PX
320 1rem->(320/640*100) px
根據(jù)屏幕和設(shè)計(jì)稿的比例，動(dòng)態(tài)計(jì)算出最新的REM和PX的換算比例即可，重新設(shè)置HTML的font-size，這樣就讓所有以REM為單位的值都跟著改變了
