当前位置: 首页 > Web前端 > HTML5

流式布局和视口

时间:2023-04-05 21:43:39 HTML5

流式布局百分比布局,非固定宽度,两侧填充内容,流式布局。视口(viewport)PC端的网页不会出现在手机端的浏览器中。这是因为移动端的网页并不是直接放在移动端的浏览器中,而是放在移动端的一个虚拟区域中。这个虚拟的区域叫做viewport(可视窗口,视口,视口的宽度一般默认比浏览器宽度大),然后视口相应缩放,最后将视口放到浏览器中。适配方案因为视口默认会缩放,所以在移动端显示的网页不友好,所以我们需要做一些配置,让移动端显示的网页和PC端一样。网页的宽度必须与浏览器的宽度一致。默认显示缩放比例与PC端一致(缩放比例为1.0)。不允许用户缩放网页。viewport主要有6个功能属性width(特殊值:device-width,表示设备屏幕的宽度)设置宽度height设置高度initial-scale(1:表示不缩放)设置默认初始缩放比例user-scalable设置用户是否可以缩放minmium-scale设置最小缩放比例maxmium-scale设置最大缩放比例