自适应小屏幕设备时,该如何布局?
分享人:宜康
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的话,就会有一个很麻烦的问题,因为屏幕过大时使用这个单位的元素会过于的大,所以配合响应式来使用是非常好的。
vw不可以设置max-width,我在做demo的时候,实验了一下,min-width:40vw,页面的宽度不受丝毫的影响。
3. 自适应屏幕缩小出现小幅度乱码时该怎么办?
我按我个人的理解的话,我会适当的去添加响应式来变回原本自适应该有的页面