响应式网站的关键要素
网格布局
弹性盒
感谢邀请我参与讨论，我一定会认真考虑。
提到响应式网站，你首先想到的是什么？说到响应式网站最重要的代码，你脑海中浮现的又是什么？CSS？相对单位（%）？媒体查询？嗯，我们这里就不讨论这些了。这篇文章旨在指出最关键的要素，缺少它们，你的所有响应式设计技巧都无法按预期发挥作用。我们说的就是 HTML 标签。但是，你知道 meta 标签与页面渲染的内容无关，对吧？它们只是承载页面内容的相关信息，甚至不会直接显示在页面上。那么，在实现网页响应式设计时，它们究竟有何作用呢？
有一个叫做 meta viewport 的特殊元标签，它实际上与页面如何适应渲染屏幕密切相关。让我们深入了解一下。
<head>
<title>Meta Viewport Example</title>
<meta name="viewport" content="width=80, initial-scale=1.0">
</head>
请查看这段代码片段，其中包含一个包含在 `<head>` 部分内的 meta 标签。`name` 属性的值是 `viewport`。这足以表明该标签用于添加与视口相关的信息——视口是指网页在屏幕上渲染的空间。我们不要将视口宽度与屏幕宽度混淆。当渲染设备是手机时，它们可能相同（我们将在本篇文章后面讨论这一点），但在台式机和 PC 上，您可以调整浏览器窗口的大小。请查看以下代码片段。将其粘贴到浏览器控制台中，然后调整窗口大小，观察视口宽度的变化。
window.addEventListener("resize", () => {
console.log(document.documentElement.clientWidth);
});
现在我们应该已经理解了物理屏幕宽度和视口宽度的区别，接下来我要解释的是，手机通常（如果不是全部的话）不会将视口宽度映射到屏幕的实际尺寸（宽度）。你可以在这里查看一些实际示例。例如，如果手机屏幕宽度为 320 像素，它可能会考虑一个 800 像素、900 像素或其他宽度的虚拟视口，然后缩小渲染输出以适应屏幕尺寸。你可能会问，为什么要这样做？这可能是因为响应式网站在以前并不普及。即使在今天，也并非所有网站都针对移动设备进行了优化（这当然也不是我们想要的结果）。如果移动浏览器厂商将浏览器视口宽度映射到屏幕宽度，那么实际网站中的元素（例如大图片、大按钮等）在如此小的视口上渲染时就会出现显示问题。因此，他们会在更大的视口上渲染，然后缩小结果以在较小的屏幕上显示。这样，你就可以放大查看你想要的部分了。想要个例子吗？打开YouTube，但要在电脑上打开，然后调整窗口大小，确保不会跳转到 m.youtube.com，那是专门为手机设计的版本。
YouTube桌面版（未针对移动设备体验进行优化）
然而，对于移动友好型网站来说，这并非理想的体验。你能猜到这种虚拟视口会造成什么问题吗？你猜对了，媒体查询会失效。如果你设置了一个媒体查询，要求在屏幕宽度为 320 像素时触发，它根本不会触发，因为实际屏幕宽度是 900 像素，只是被缩小显示，以适应 320 像素宽的移动屏幕。那么，移动浏览器厂商对于像我们这样编写媒体查询以使网站在所有屏幕尺寸上都能良好呈现的开发者，又做了些什么呢？他们提供了 meta viewport 标签，我们可以将其添加到网页中，告诉浏览器根据我们的需求设置虚拟视口的宽度。这样，当你使用 `<meta viewport>` 标签时，移动浏览器就知道你想用一个与设备屏幕宽度相同的虚拟视口来渲染页面。当然，你可以将这个“宽度”值设置为任意像素，但这并不能带来理想的效果。你可以在w3schoolhtml <meta name="viewport" content="width=device-width" />
上找到相关示例。
有趣的是，如果你使用像 create-react-app、vue create 等样板构建工具，你可能没有仔细检查过 index.html 文件。如果你仔细检查，肯定会在 head 部分找到 meta viewport 标签。暂时移除它，看看你的 Web 应用在不同屏幕尺寸上的显示效果。希望现在大家都能理解移动浏览器的虚拟视口了。
点击此处了解更多关于虚拟视口的信息
原文发布于此 -
https://mayankav.webflow.io/blog/key-to-responsive-websites
文章来源：https://dev.to/mayankav/the-key-element-to-responsive-websites-31e5