【CSS-task-10】

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

分享人：宜康

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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" content=content="width=device-width, initial-scale=1" 这段代码意思是说网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 viewport是应对手机模式访问网站,网页对屏幕而做的一些设置。设置viewport后，移动页面就可以进行拖动，放大缩小。

5.编码实战

6.扩展思考

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

7.参考文献

参考一：阮一峰

参考二：自适应设计-MDN

8.更多讨论

自适应和响应式各有什么优缺点？

鸣谢

感谢大家观看

BY : 宜康