首页 > 代码库 > 移动web中的流式布局和viewport知识介绍

移动web中的流式布局和viewport知识介绍

1   流式布局

其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

这样的布局方式  就是移动web开发使用的常用布局方式

2    Viewport

  1. 我们猜想下pc页面在移动设备上显示情况。

放不下,缩放?

  1. 我们测试下pc页面在移动设备上显示。

默认的缩放的显示的

  1. 认识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知识介绍