首页 > 代码库 > 移动web中的流式布局和viewport知识介绍
移动web中的流式布局和viewport知识介绍
1 流式布局
其实 流式布局 就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
这样的布局方式 就是移动web开发使用的常用布局方式
2 Viewport
- 我们猜想下pc页面在移动设备上显示情况。
放不下,缩放?
- 我们测试下pc页面在移动设备上显示。
默认的缩放的显示的
- 认识viewport
在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设置是否允许用户自行缩放。
width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比,大于0的数字
minimum-scale:最小缩放比,大于0的数字
user-scalable:用户是否可以缩放,yes或no(1或0);
用meta标签把viewport的宽度设为device-width,同时initial-scale=1,user-scalable = 0就构建了一个标准的移动web页面
移动web中的流式布局和viewport知识介绍
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。