自适应小屏幕设备时，该如何布局？

1.背景介绍

随着科技的发达，使用移动设备诸如手机平板等获取信息，社交的人越来越多。如何在屏幕大小不

同的物理设备上获得类似的使用体验呢？ 很多网站的做法是为不同大小的物理设备提供不同的网

页。但是这样做很麻烦，需要维护多个版本，不够方便。如果只写一个版本，但是可以适应不同宽

度的物理设备，那该多好。自适应网页设计（Responsive Web 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"ontent=content="width=device-width, initial-scale=1"这段代码意思是说网

页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即

网页初始大小占屏幕面积的100%。viewport是应对手机模式访问网站,网页对屏幕而做的一些设置

。设置viewport后，移动页面就可以进行拖动，放大缩小。

5.编码实战

https://immortal-frog.github.io/task12/

上面是我们任务中的一个页面，其中就用到了自适应的知识；

在移动页面中，因为手机的屏幕的宽度比较小，所以我们在布局时要尽量的不要让同一行内出现多

个模块，最好每一行就一个模块，然后另起下一行这么一行一行的砌砖块，尽量不要出现多个页面

同属一列的情况，关于具体的方法大家可以在最下的视频中查看。

6.扩展思考

除了自适应还有什么其他方法实现对小屏幕设备的适应

除了自适应外，响应式也是一个方法，关于响应式，我们之前的小课堂有讲到，不清楚的道友们可

以翻看我们之前的小课堂。在实际应用中，我们通常会自适应和响应式结合使用，这样才能获得最

好的效果。

7.参考文献

参考一：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html     阮一峰

参考二：https://developer.mozilla.org/zh-CN/docs/Web_Development/%E5%93%8D

%E5%BA%94%E5%BC%8F_Web_%E8%AE%BE%E8%AE%A1     自适应设计-MDN