Question

如何制作自适应网页

Answer 1

Step
1：Meta
标签
（查看演示：
demo）
为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport
meta标签来设定。以下viewport
meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
IE8及其更低版本不支持media
query，可以使用
media-queries.js或
respond.js脚本实现支持。
<!--[if
lt
IE
9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Step
2.
HTML结构
在这个例子中，页面布局包括
header，
content
container，
sidebar，
和
footer。header固定高度为180px，
content
container宽600px，sidebar宽300px。
Step
3.
Media
Queries
CSS3
media
query是自适应网页设计的关键，他就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。
如果视口宽度小于等于980px，下面规则生效。
这里将容器像素宽度该用百分比，页面排版更加灵活。
如果视口宽度小于等于700px，
将#content
和#sidebar
宽度设为自动(auto
width)，并移除它的浮动属性(float)，这样它会变成满版显示。
当视口宽度小于等于480px时（如手机屏幕），将#header高度设为自动，h1
的字体大小设定为24px，并隐藏#sidebar。
根据你的喜好，可以定义更多的media
queriey条件