关于自适应网页设计的初步学习与总结

总结于http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html，只是用来记录自己学习历程，详情请参阅。

一、允许网页宽度自动调整

        需于头部加入viewport元标签：

       <meta name="viewport" content="width=device-width, initial-scale=1" />

  viewport是网页默认的宽度和高度，"width=device-width"表示网页宽度默认等于屏幕宽度，"initial-scale=1"表示原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。

  这个设置支持IE9以上版本的IE和主流浏览器，IE8一下需要使用css3-mediaqueries.js。

   <!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

二、不使用绝对宽度

   不能指定像素宽度，只能使用百分比宽度。

三、相对大小的字体

   字体大小设定不使用绝对大小(px)，而只能使用相对大小(em)。

四、流动布局

   使用样式 float

五、选择性的加载CSS

   CSS3引入了一个新的模块Media Query,能够使你的网页自动探测屏幕宽度，然后加载相应的CSS文件。

六、CSS的@media规则

七、图片的自适应