关于网页自适应问题二

1、宽度不要用绝对的

  　auto; / XX%;

2、字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”

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

html的字体大小设置为font-size:62.5%

原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了子元素相关尺寸计算方便，这样写最合适不过了。

3、流动布局

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的

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

像这样，用左浮动和右浮动，好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现
4、选择加载CSS

<link rel="stylesheet" type="text/css" media="screen and (max-device- 600px)" href="style/css/css600.css" />

这段代码的意思是：如果屏幕宽度小于600像素（max-device- 600px），就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件

<link rel="stylesheet" type="text/css" media="screen and (min- 600px) and (max-device- 980px)" href="css600-980.css" />

5、图片自适应，"自适应网页设计"还必须实现图片的自动缩放。