五、流式布局

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

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

接下來我們看一個例子：

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

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

六、媒體查詢

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

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

2.媒體查詢語法

我們在媒體查詢外面寫的第一條規(guī)則，是“基本的”樣式，它適用于任何設(shè)備。在此基礎(chǔ)上，我們再為不同視口、不同能力的設(shè)備，漸進(jìn)增加不同的視覺效果和功能。

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就表示媒體查詢，查詢現(xiàn)在看這個網(wǎng)頁的設(shè)備是什么，以及它的寬度是多少。screen表示看這個網(wǎng)頁的設(shè)備是顯示器，而不是殘疾人聽力設(shè)備、也不是打印機(jī)。后面用and符號羅列所有的可能性。

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