自适应网页

---

在网页代码的头部加入一行 viewport元标签

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

viewport 是网页默认的宽度和高度；
网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

不使用绝对宽度
不能使用绝对宽度的布局，只能指定百分比宽度：
width: xx%;或者width: auto;

相对大小的字体
不能使用绝对大小（px），只能使用相对大小（em）

图片自适应
img { max-width: 100%; }
老版本ie不支持直接写成img { width: 100%; }

选择加载css
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="app.css" />
ps: 屏幕宽度小于480px（max-device-width: 480px）就加载app.css文件

css的@media
@media screen and (max-device-width: 480px) {
　　　　.header {
　　　　　　height: auto;
　　　　}
　　　　#sidebar {
　　　　　　display: none;
　　　　}
　　}
ps: 屏幕宽度小于480px，header块高度自动调节（height：auto）；sidebar块不显示（display：none）。