响应式网页设计 - 视口

什么是视口？

视口是网页的用户可见区域。

视口因设备而异，并且在手机上会比在计算机屏幕上小。

在平板电脑和手机之前，网页仅针对计算机屏幕而设计，并且网页通常具有静态设计和固定尺寸。

然后，当我们开始使用平板电脑和手机上网时，固定尺寸的网页太大而无法适应视口。为了解决这个问题，这些设备上的浏览器缩小了整个网页以适应屏幕。

这并不完美！但要快速解决。

HTML5 引入了一种让网页设计者通过以下方式控制视口的方法：<meta>标签。

您应该包括以下内容<meta>所有网页中的视口元素：

这为浏览器提供了如何控制页面尺寸和缩放的说明。

这个width=device-width部分设置页面的宽度以遵循设备的屏幕宽度（这将根据设备而变化）。

这个initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

这是一个网页示例没有视口元标记和相同的网页和视口元标记：

提示：如果您使用手机或平板电脑浏览此页面，可以点击上面的两个链接来查看差异。

用户习惯于在桌面和移动设备上垂直滚动网站 - 但不习惯水平滚动！

因此，如果用户被迫水平滚动或缩小才能查看整个网页，则会导致糟糕的用户体验。

需要遵循的一些附加规则：

1. 不要使用大的固定宽度元素 -例如，如果图片以比视口更宽的宽度显示，则可能会导致视口水平滚动。请记住调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来良好渲染- 由于设备之间的屏幕尺寸和 CSS 像素宽度差异很大，因此内容不应依赖于特定视口宽度来良好渲染。

3.使用CSS媒体查询为小屏幕和大屏幕应用不同的样式- 为页面元素设置较大的绝对 CSS 宽度将导致该元素对于较小设备上的视口来说太宽。相反，请考虑使用相对宽度值，例如 width: 100%。另外，请小心使用较大的绝对定位值。它可能会导致元素落在小型设备上的视口之外。