css响应式布局

一，加入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%}