響應(yīng)式布局依靠的就是依靠媒體查詢(media)來實(shí)現(xiàn)的。
在CSS3中，引入了Media Queries模塊，該模塊允許添加媒體查詢表達(dá)式样眠，用來指定媒體模塊，然后根據(jù)媒體類型來選擇不同的樣式翠肘。
大致的書寫形式有三種：
第一種檐束，當(dāng)顯示的寬度大于多少即最小為多少時(shí):
@media screen and (min-width: 320px) {
div{
font-size: 30px;
}
}
第二種,介于X px 和 Y px 之間的情況:
@media screen and (max-width: 600px) and (min-width: 400px) {
div{
width: 200px;
background: blue;
}
}
第三種，就是小于某個(gè)值的情況束倍，即最大值為多少的情況：
@media screen and (max-width: 600px) {
div{
width: 100%;
background: green;
}
}
這樣被丧，就可以根據(jù)媒體查詢來做出我們想要的響應(yīng)式布局。
