ul 响应式布局_响应式布局进阶篇 viewport

最新推荐文章于 2021-04-22 08:40:00 发布

weixin_39595310

最新推荐文章于 2021-04-22 08:40:00 发布

阅读量119

点赞数

文章标签： ul 响应式布局

本文链接：https://blog.csdn.net/weixin_39595310/article/details/111689671

版权

作者 | Brilliant Open Web团队

编辑 | Brilliant Open Web团队

本文承接前两篇文章，主要介绍如何正确设置 Web 页面的 viewport，为后续编写用户体验良好的响应式布局页面做准备。

在前面的文章中，我们已经了解了一些视口(viewport)相关的单位 `vw`、`vh` 等，如 100vw = 100% 视口宽度。但视口宽度是多少呢？本文就来给大家讲解在响应式布局页面中，视口所发挥的作用。

设置 viewport

viewport(视口)是用户可以看到的 Web 页面视口区域。在早期，许多 Web 页面没有针对移动端优化。由于移动设备像素比较低，多为 320px，从而在打开 PC 端的页面时，会因为视口太窄导致页面布局错乱。为了解决这个问题，浏览器会在一个虚拟视口中渲染页面，通常会将 viewport 设置为一个较大的值(如 Safari 默认是 980px)，这样 PC 端的网页在移动设备浏览器上都能在一屏内显示所有内容，只是页面元素看上去比较小。用户可能需要通过水平滚动、缩放等操作才能查看页面的不同区域，体验很差。

但是，移动互联网发展了这么长时间，已经不再像移动互联网初始阶段一样存在大量超过 980px 的页面，同时，很多移动端站点都会使用媒体查询等其他技术来适配较窄的屏幕，那么浏览器提供的虚拟视口就不再必要了。

为了支持响应式布局，我们首先需要通过 viewport meta 标签正确设置页面的 viewport。一个针对移动端做过优化的站点中，应该包含以下类似的内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

其中 width 控制视口的宽度，可以设置为设备宽度 device-width，或是具体的像素值。在上面的例子中，viewport 的宽度设置为 device-width。这意味着，如果屏幕宽度是 375px(如 iPhone X)，则浏览器也使用 375px 的视口宽度来渲染页面，而不是使用 980px 或其他宽度使页面缩小展示。initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别。我们还可以通过 minimum-scale 和 maximum-scale 等属性控制用户的缩放操作，但这也可能导致页面的可访问性问题。更多的属性可以参考下表：

字段名	取值	说明
width	正整数、device-width	定义视口的宽度，单位是 CSS 像素，如果等于 device-width，则为理想视口宽度
height	正整数、device-height	定义视口的高度，单位是 CSS 像素，如果等于 device-height，则为理想视口高度
initial-scale	0 ~ 10	初始缩放比例，允许小数点
minimum-scale‍‍	‍‍0 ~ 10	最小缩放比例，必须小于等于 maximum-scale
maximum-scale	0 ~ 10	最大缩放比例，必须大于等于 minimum-scale
user-scalable	yes、no	是否允许用户缩放页面，默认是 yes

确保内容不会超出 viewport

用户通常习惯垂直滚动浏览页面。在设置 width=device-width 后，如果有页面元素的宽度超出了视口宽度，就会强迫用户通过水平滚动或缩小页面来浏览页面全部内容，带来糟糕的用户体验。因此，不能期望设置 viewport 宽度就能解决所有适配问题，开发者还需记住以下原则：

不要使用大的固定宽度的元素，如果不考虑穿戴式设备，不要设置大于 320px 的宽度
不应该让内容在某一个特定宽度的 viewport 下才能正常显示
使用相对单位或者媒体查询让元素在不同大小的视口下适配

如推荐使用 width: 100% 而不是 width: 320px 来确保元素占满容器宽度。否则对于不同视口宽度的设备来说，页面的体验将会不一致，也有可能使元素意外超出视口宽度。

对于图片或者视频等嵌入式的元素，可以在站点 CSS 中添加下面的代码：

img, embed, object, video {  max-width: 100%; /* 设置 img 等元素最大宽度为 100% */}

总结

本文首先从视口相关单位出发，引出了视口的概念。接着介绍了视口的历史背景，以及设置视口的正确方法。利用 meta 标签将视口宽度设置为设备宽度，可以使页面在移动端下有良好的展现。最后列举了一些为确保页面元素不超出视口宽度的注意事项。开发者可以利用这些视口相关的最佳实践，编写出用户体验良好、且适用于不同尺寸屏幕的页面。

本文内容主要来自开源书籍《PWA 应用实战》。该书由百度 Web 生态团队撰写与分享，记录了团队过去两年积累的 PWA 方面的经验，欢迎对 Web 和 PWA 有浓厚兴趣的读者加入我们，一起来维护这本书。