五、流式布局

百分比布局也叫作流式布局、彈性盒布局。手機(jī)網(wǎng)頁(yè)沒(méi)有版心，都左右撐滿(mǎn)。
百分比能夠設(shè)置的屬性是width、height、padding、margin。其他屬性比如border、font-size不能用百分比設(shè)置的。

• 如果用百分比寫(xiě)width，那么指的是父元素width的百分之多少。
• 如果用百分比寫(xiě)height，那么指的是父元素height的百分之多少。
• 如果用百分比寫(xiě)padding，那么指的是父元素width的百分之多少，無(wú)論是水平的padding還是豎直的padding。
• 如果用百分比寫(xiě)margin，那么指的是父元素width的百分之多少，無(wú)論是水平的margin還是豎直的margin。
• 不能用百分比寫(xiě)border的寬度

接下來(lái)我們看一個(gè)例子：

div{
    width:200px;
    height:300px;
    padding:10px;
}
div p{
    width:50%;
    height:50%;
    padding:10%;   
}
此時(shí)p的真實(shí)寬度是多少？

此時(shí)p的真實(shí)寬度是140px*190px

六、媒體查詢(xún)

1.為什么響應(yīng)式 Web 設(shè)計(jì)需要媒體查詢(xún)

CSS3媒體查詢(xún)可以讓我們針對(duì)特定的設(shè)備能力或條件為網(wǎng)頁(yè)應(yīng)用特定的CSS樣式。如果沒(méi)有媒體查詢(xún)，光用CSS是無(wú)法大大修改網(wǎng)頁(yè)外觀(guān)的。這個(gè)模塊讓我們可以提前編寫(xiě)出適應(yīng)很多不可預(yù)測(cè)因素的CSS規(guī)則，比如屏幕方向水平或垂直、視口或大或小等等。彈性布局雖然可以讓設(shè)計(jì)適應(yīng)較多場(chǎng)景，也包括某些尺寸的屏幕，但有時(shí)候確實(shí)不夠用，因?yàn)槲覀冞€需要對(duì)布局進(jìn)行更細(xì)致的調(diào)整。媒體查詢(xún)讓這一切成為可能，它就相當(dāng)于CSS中基本的條件邏輯。

2.媒體查詢(xún)語(yǔ)法

我們?cè)诿襟w查詢(xún)外面寫(xiě)的第一條規(guī)則，是“基本的”樣式，它適用于任何設(shè)備。在此基礎(chǔ)上，我們?cè)贋椴煌暱?、不同能力的設(shè)備，漸進(jìn)增加不同的視覺(jué)效果和功能。

body {
    background-color: grey;
 } 
@media screen and (min-width:1200px){
    body{
        background-color: pink;
    }
}
 @media screen and (min-width:700px) and (max-width:1200px){
    body{
    background-color: blue;
    }
}
@media screen and (max-width:700px){
    body{
    background-color: orange;
        }
}

其中@media就表示媒體查詢(xún)，查詢(xún)現(xiàn)在看這個(gè)網(wǎng)頁(yè)的設(shè)備是什么，以及它的寬度是多少。screen表示看這個(gè)網(wǎng)頁(yè)的設(shè)備是顯示器，而不是殘疾人聽(tīng)力設(shè)備、也不是打印機(jī)。后面用and符號(hào)羅列所有的可能性。

值得注意：媒體查詢(xún)只能包裹選擇器，不能包裹k:v對(duì)兒。
IE6、7、8不支持媒體查詢(xún)，也為了防止手機(jī)端的某些瀏覽器不支持媒體查詢(xún)，所以不要把所有的選擇器都放在媒體查詢(xún)里面。