自适应小屏幕设备时，该如何布局？
分享人：宜康
1.背景介绍
随着科技的发达，使用移动设备诸如手机平板等获取信息，社交的人越来越多。
如何在屏幕大小不同的物理设备上获得类似的使用体验呢？
很多网站的做法是为不同大小的物理设备提供不同的网页。但是这样做很麻烦，
需要维护多个版本，不够方便。如果只写一个版本，但是可以适应不同宽度的物理设备，
那该多好。自适应网页设计（ResponsiveWeb Design）应运而生。
2.知识剖析
什么是自适应网页设计？ 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）。
3.常见问题
问题1:如何实现自适应网页设计？
问题2:viewport的作用。
4.解决问题
1.不使用绝对宽度，使用相对单位 具体来讲CSS代码不能指定像素宽度为xx px;只能指定百分比宽度 width: xx%;或者width:auto; 字体只能使用相对大 小（em,rem,vw,vh,vmin,vmax)等。
2.在网页代码的头部，加入一行meta标签：meta name="viewport" content=content="width=device-width, initial-scale=1" 这段代码意思是说网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
viewport是应对手机模式访问网站,网页对屏幕而做的一些设置。设置viewport后，移动页面就可以进行拖动，放大缩小。
5.拓展思考
除了自适应还有什么其他方法实现对小屏幕设备的适应
6.参文献考
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 阮一峰
7.课外问题
1.能不能说下什么情况下用vw比较好：
如果单纯的用vw的话，就会有一个很麻烦的问题，因为屏幕过大时使用这个单位的元素会过于的大，所以配合响应式来使用是非常好的。
2.用vw可以设置最大宽度max-width和最小宽度嘛？
vw不可以设置max-width，我在做demo的时候，实验了一下，min-width：40vw，页面的宽度不受丝毫的影响。
3. 自适应屏幕缩小出现小幅度乱码时该怎么办？
我按我个人的理解的话，我会适当的去添加响应式来变回原本自适应该有的页面