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

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

em&rem
em的大小相對于帶有字體大小設置的父元素而定，都沒有則根據body而定
rem是css3得新特征，其大小相對于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){}