触屏版网页适配

1、在网页代码的头部加上

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

width=device-width：表示网页默认宽度为设备宽度，initial-scale=1：缩放比例1.0

2、不使用绝对宽度的布局和绝对宽度的元素

width使用形式：width：xx%或者width：auto

3、字体的大小使用em

body { font: normal 100% Helvetica, Arial, sans-serif; }  

指定页面字体的大小为网页默认的100%即16像素，其他地方使用通过

{ font-size: 1.5em; }

表示字体大小为16像素的1.5倍

4、流动布局

.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }

使用案例：当宽度不足以放下两个布局是，后面的会在下方出现，不会导致溢出

5、图片自适应

img { width: 100%; }