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%; }