今天給大家談?wù)勱P(guān)于響應(yīng)式布局。
響應(yīng)式布局，簡(jiǎn)單來說，讓網(wǎng)頁中的元素（控件）跟隨網(wǎng)頁寬高的變化而變化。
媒體查詢的主要用法：
1.@media screen and (max-width:500px){} //當(dāng)屏幕寬度小于500時(shí)，自己設(shè)置需要改變的內(nèi)容,注意and左右要用空格！
2.@media screen and (min-width:500px) and (max-width:100px){} //當(dāng)屏幕寬度大于500到小于1000之間
3.@media screen and (min-width:1000px){} //當(dāng)屏幕寬度大于1000時(shí)

媒體查詢+響應(yīng)式布局
無論是內(nèi)外邊距的上左下右的百分比都是依據(jù)父元素的快讀設(shè)定而不是高度，一般高度用固定像素px，而不是百分比

em&rem
em的大小相對(duì)于帶有字體大小設(shè)置的父元素而定，都沒有則根據(jù)body而定
rem是css3得新特征，其大小相對(duì)于html元素而定

外部引入+媒體查詢的格式
<link rel="stylesheet" type="text/css" href="media.css" media="screen and (max-width:500px)">

橫屏和豎屏
橫屏：@media screen and (orientation:landscape){}
豎屏：@media screen and (orientation:portrait){}