1、在meta标签中添加viewport
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
2、 不使用绝对宽度（px），使用相对宽度（%）
3、 不使用绝对文字大小（px），使用相对文字大小（em,rem）
em相对于父元素字体尺寸比例，rem相对于根元素（html元素）字体尺寸的比例，比如各浏览器默认根元素字体大小为16px，0.75rem就相当于16*0.75=12px。也可以先设置html{font-size:62.5%}，设置根元素字体大小为10px，然后再计算各元素的字体大小，如要设置12px就是1.2rem，14px就是1.4rem，25px就是2.5rem，更容易计算。
4、 媒体查询标签
自适应网页设计的核心，就是CSS3引入的media query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的css文件。
<link rel=”stylesheet” type=”text/css” media=”screen and (max-400px)” href=”tinyScreen.css”/>
上面代码的意思是，如果屏幕宽度小于400像素(max-400px)，就加载tinyScreen.css文件。
<link rel=”stylesheet” type=”text/css” media=”screen and (min-400px) and (max-600px)” href=”smallScreen.css”/>
如果屏幕宽度在400像素到600像素之间，则加载smallscreen.css文件。
5、 图片的自动适应
除了布局和文本，自适应网页设计还必须实现图片的自动缩放
img{max-width:100%} img{min-width:100%}
老版本的IE不支持max-width，所以只好写成img{100%}