关于响应式布局，你必须要知道关于响应式布局的几件事(3)

五、流式布局

百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心，都左右撑满。
百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

• 如果用百分比写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%;   
}
此时p的真实宽度是多少？

此时p的真实宽度是140px*190px

六、媒体查询

1.为什么响应式 Web 设计需要媒体查询

CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询，光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则，比如屏幕方向水平或垂直、视口或大或小等等。弹性布局虽然可以让设计适应较多场景，也包括某些尺寸的屏幕，但有时候确实不够用，因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能，它就相当于CSS中基本的条件逻辑。

2.媒体查询语法

我们在媒体查询外面写的第一条规则，是“基本的”样式，它适用于任何设备。在此基础上，我们再为不同视口、不同能力的设备，渐进增加不同的视觉效果和功能。

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就表示媒体查询，查询现在看这个网页的设备是什么，以及它的宽度是多少。screen表示看这个网页的设备是显示器，而不是残疾人听力设备、也不是打印机。后面用and符号罗列所有的可能性。

值得注意：媒体查询只能包裹选择器，不能包裹k:v对儿。
IE6、7、8不支持媒体查询，也为了防止手机端的某些浏览器不支持媒体查询，所以不要把所有的选择器都放在媒体查询里面。