一,加入viewport元标签
<meta name="viewport" content="width=device-width,initial-scale="1">
viewport网页默认宽度与高度
二,不适用绝对宽度大小
三,流动布局
各个区块位置是流动的,不是水平不变的
四,使用media Query模块
例
<link rel="tylesheet" type="text/css" media="screen
and(max-device-width:600px)"
href="style/css/css600.css">
即若屏幕宽度小于600px,则加载css600.css文件
五,css的@media 规则
@media screen
and(max-device-width:400px)
{.left{float:none;}}
当屏幕小于400px,则left取消浮动;
六,图片自适应
img{max-width:100%}