Css “去除”的副作用；宽度=设备宽度“；“从视口元标记开始”；初始刻度=1.0“；也设定了

虽然标签是不标准的，但它“由于事实上的主导地位而受到大多数移动浏览器的尊重”

它不是一个真正的web标准的一个缺点是详细的文档没有其他标准可用。这本书对此有一个规范，所以这就是我作为权威作品主要使用的内容

我的主要问题是：

以下声明之间的感知差异是什么？

或者问，这两种CSS at规则之间的区别是什么：

/*翻译自*/
@视区{
缩放：1.0；
最小宽度：扩展到缩放；
最大宽度：100vw；
}

/*翻译自*/
@视区{
缩放：1.0；
最小宽度：扩展到缩放；
最大宽度：扩展到缩放；
}

---

我是如何到达那些

@viewport

翻译的：

width=设备宽度

至

最小宽度：扩展至缩放；最大宽度：100vw
各国：

宽度
和
高度
视口
属性被转换为
宽度
和
高度
描述符，将
最小宽度
/
最小高度
值设置为
扩展到缩放
，将
最大宽度
/
最大高度
值设置为距视口的长度

此外，他们还提供了：

此
元素：

<meta name="viewport" content="width=500, height=600">

<meta name="viewport" content="initial-scale=1.0">

具体内容如下：

这是一个用于设置
最小宽度
和
最大宽度
的简写描述符。一个
值将
最小宽度
和
最大宽度
设置为该值。两个
值将
最小宽度
设置为第一个值，将
最大宽度
设置为第二个值

因此，
width：扩展到缩放500px相当于
最小宽度：扩展到缩放；最大宽度：500px

这只剩下
100vw
部分。其中，他们解释说：

设备宽度
和
设备高度
分别转换为100vw和100vh

因此，我们最终可以看到
width=设备宽度
如何转换为
minwidth:extend to zoom；最大宽度：100vw

初始比例=1.0
至
缩放：1.0；宽度：扩展到缩放
这是一个：

此
元素：

<meta name="viewport" content="width=500, height=600">

<meta name="viewport" content="initial-scale=1.0">


我这里的另一个问题是，扩展到缩放的
值到底是什么？

这一点很难掌握。如果有人能给我指出更多的例子，我将不胜感激


除了以上所有内容之外，我还创建了一个快速站点--测试一些视口配置

即：





这可能有助于测试。
在深入研究您的问题之前，让我们先回顾一下
viewport
元标记存在的原因。这是我收集到的


为什么我们需要
视口
标记？
视口是可以看到web内容的区域。通常，呈现的页面（web内容）比视口大。因此，我们通常使用滚动条查看隐藏内容（因为视口无法显示所有内容）：

对于设计为美观的文档来说，窄视口是一个问题
在桌面浏览器中。其结果是，移动浏览器供应商使用
固定的初始包含块大小不同于
视口大小，并接近典型桌面浏览器窗口的大小。
除了滚动或平移外，缩放通常用于更改
在文档概述和放大文档的特定区域之间
要阅读并与之交互的文档

在移动设备（和其他较小的设备）中，视口通常比视口大。例如，屏幕宽度为
640px
的移动设备可能具有
980px
的初始包含块。在这种情况下，初始包含块缩小到
640px
，以便它可以适合移动屏幕。这个
640px
width（屏幕宽度）就是所谓的视口宽度，与我们的讨论相关

所以。。。。为什么我们需要这个
视口
标记？好吧，现在，我们有了一个可以让我们为移动设备设计的平台。但是，此媒体查询取决于实际的视口的宽度。在移动设备中，用户代理会自动将初始视口大小设置为不同的固定大小（通常大于初始视口大小）。因此，如果移动设备的视口宽度是固定的，我们在媒体查询中使用的CSS规则将不会被执行，因为视口的宽度永远不会改变。使用
视口
标记，我们可以控制实际视口的宽度（由UA设置样式后）：

然而，对于使用媒体查询优化窄屏幕的页面，这种机制并不太好——例如，如果虚拟视口为980px，则永远不会使用640px或480px或更低的媒体查询，从而限制了此类响应设计技术的有效性

请注意，
viewport
标记也可以更改实际视口的高度，而不仅仅是宽度


视口
标记的
宽度
视口
标记中的
宽度
在
@视口
规则中转换为
最大宽度
。当您将
宽度
声明为
设备宽度
时，它将在
@视口
规则中转换为
100%
。基于视口的
初始宽度
进行解析。因此，如果我们仍然使用上述示例，
max width
将解析为
640px
的值。正如你所发现的，这只是