响应式网页设计 - 视窗

什么是视窗？

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

视窗的大小根据设备而有所不同，在手机上比在电脑屏幕上要小。

在平板电脑和手机出现之前，网页只为电脑屏幕设计，网页通常具有静态设计和固定大小。

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

这不是完美解决方案，但它是一个快速的修复方法。

设置视窗

HTML5 引入了一种方法，让网页设计师可以通过 <meta> 标签控制视窗。

您应该在所有网页中包含以下 <meta> 视窗元素

这为浏览器提供了有关如何控制页面尺寸和缩放的指令。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（根据设备的不同，宽度会有所不同）。

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

以下是一个没有视窗元标签的网页示例，以及同一个带有视窗元标签的网页示例

没有视窗元标签

有视窗元标签

将内容大小调整为视窗

用户习惯在台式机和移动设备上垂直滚动网站，但他们不习惯水平滚动！

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

一些额外的规则要遵循

1. 不要使用大型固定宽度元素 - 例如，如果图像显示的宽度大于视窗宽度，会导致视窗水平滚动。请记住将此内容调整为适应视窗的宽度。

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

3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置大的绝对 CSS 宽度会导致该元素在较小的设备上过宽。相反，请考虑使用相对宽度值，例如 width: 100%。此外，要小心使用大的绝对定位值。它可能会导致元素在小型设备上超出视窗范围。