<
在网页代码的头部，加入一行viewport标签


viewport是网页默认的宽度和高度，
上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），
原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
不使用绝对宽度

width:auto;/width:XX%;

字体大小设置
字体大小是页面默认大小的100%，即16px
字体应使用相对大小rem

html{font-size:62.5%}
body{font:normal 100% Arial,sans-serif;font-size:1.4rem;}


流动布局
流动布局：各个区块的位置是浮动的。


.left{width:30%;float:left;}
.right{width:70%;float:right:}

其好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现
选择性加载css
自适应网页设计的核心是：css3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件

href="style/css/css600.css" />

如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件

href="css600-980.css" />

如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件
 

图片自适应
必须实现图片的自动缩放

img，object{max-width:100%;}
兼容ie img{width:100%}

>