视口又称为虚拟容器,即viewport。移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的区域。视口的宽度是人为规定的,默认为980px,我们可以通过meta标签修改视口的宽度,只要设置好视口的大小,页面内容在手机上就不会被压缩。
视口分为layout viewport,visual viewport,ideal viewport三种,layout viewport 又称为布局视口,在移动设备上,布局视口会远大于设备的宽度,visual viewport即视觉视口,是用户看到的区域,缩放可以改变其视觉大小,但无论如何缩放,都不会影响布局视口的宽度。ideal viewport为理想视口,是指布局视口的一个理想尺寸,只有当布局视口的宽度等于设备屏幕尺寸时,才是理想视口。其中,布局视口会限制css布局,视觉视口决定用户看到的网站内容,同时可以把布局视口尺寸定义为理想视口,这也是响应式设计的基础。
视口总结
最新推荐文章于 2024-03-10 08:25:32 发布