新知识——响应式

今天又学了新的知识 ——响应式！

响应式的三个步骤：

第一步：Meta标签

可以使用视图的meta标签来进行重置

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

第二步：流式布局

注意不要用px!

第三步：媒介查询

css3 Media Query-媒介查询是响应式设计的核心，根据条件告诉浏览器如何为指定视图宽度渲染页面。例如：

@media screen and (max-width: 48px) {
#pagewrap{
width: 94%;
}
#content{
width: 65%;
}
#sidebar{
width: 30%;
}
}

媒介查询的目的在于为指定的视图宽度指定不同的css规则，来实现不同布局。媒介查询可以写在同一个或者单独的样式表中！

1em=16px;(用于计算)

对于不支持media query的浏览器，我们要在页面中调用css3-mediaqueries.js

<!--[if lt IE 9]> <script src="<a href="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>" class="ext" target="_blank">http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j...</a><span class="ext"></span> <![endif]-->

注意点：

1、由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。只能指定百分比宽度:（width: xx%;）或者（width:auto;）

2、字体也不能使用绝对大小（px），而只能使用相对大小（em）。