响应式布局

响应式布局用的做多的地方就是我们的手机，平板电脑，PC电脑的浏览器。在做响应式布局的时候我们绝对不能使用绝对宽度和字体

1. 流放式布局。

流放式布局就是把我们原来在CSS里面写的PX改成%，这样页面就不会像原来的页面根据浏览器放大缩小而会出现横向的滚动条，可以说这是响应式布局的关键。不过有个缺陷就是我们用%的话不好控制，不过后面又出现了新的标签，可以用em   和ex。还有rem。这样我们就可以很好的控制，不过这个是需要我们自己来算，1em等与16px。

2.媒体查询。

div{float: left;width: 30%;height: 100px;margin: 10px;}@media only screen and (max-width: 600px) {div{width: 95%;}}

上面的代码,表示正常情况下div的width还是维持在30%没有变化,但是当检测到screen的最大宽度是600px的时候,就将执行@media里面的css,其实就是相当于利用了层叠样式表的特性,@media里面的代码将原来的覆盖了.

max-width就是当屏幕小于等于多少的时候执行(<=)
min-width就是当屏幕大于等于多少的时候执行(>=)

@media only screen and (max-width: 600px) {div{width: 95%;    }}

当屏幕宽度<=600px的时候,就让一个div占满一行(95%)

3.meta标签设置

<meta name="viewport" content="width=device-width, initial-scale=1.0" />