浅谈响应式布局

今天给大家谈谈关于响应式布局。
响应式布局，简单来说，让网页中的元素（控件）跟随网页宽高的变化而变化。
媒体查询的主要用法：
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){}