我正在制作响应式设计，我希望其显示1920p尺寸大于与视口宽度成比例的比例。1920p这对于上述任何分辨率（例如 4k、8k、16k 和其他分辨率）都很有用。
为了使该工作（部分）我必须为每个分辨率创建媒体查询，但是当用户没有使用浏览器窗口的完整显示宽度时，布局会在某些尺寸上中断。
我目前拥有的是：
@media (min-width: 2880px) {
body {
zoom: 1.5;
}
}
@media (min-width: 3840px) {
body {
zoom: 2;
}
}
我想做的是这样的：
@media (min-width: 1920px) {
body {
zoom: calc(100vw / 1920);
}
}
这将使布局对于上述任何分辨率保持静态1920p。
不幸的是，该calc()函数将结果值解析为，px并且浏览器忽略该值，因为zoom属性只接受numberorpercentage其值。
例如，在3840p决议中，我期望有2但实际输出是2px。
有没有办法以某种方式将此输出转换为number没有单位的原始输出？
我创建了一个小提琴来举例说明该问题： https ://jsfiddle.net/bfaria/41rqxbs0/
在此小提琴中，您可以调整输出视口的大小，以查看分辨率高于 625 像素时的缩放行为。请注意，如果您检查该body元素，您将看到声明zoom: calc(100% * calc(100vw / 625));有此警告：Invalid property value。
根据 MDN 的说法，CSS Zoom 是：
非标准
此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。
因此就会出现问题。Zoom 目前似乎不接受calc值作为选项（确切原因尚不清楚，可能有多个）。
然而，正如 MDN 上所述：
transform: scale()如果可能的话，应该使用它来代替此属性。但是，与 CSS 变换不同，缩放会影响元素的布局大小。
因此，您应该使用transform: scale();而不是zoom. 但变换比例只接受无单位的数字；1 = 100% 缩放级别。
您想要实现的目标无法通过您当前正在考虑的方法在 CSS3 中完成。
因此，您需要在 LESS CSS 中自动生成数字（请参阅下面的链接）或在 Javascript 中自动生成值。最后，最耗时的是将页面的所有内容设置为基于vw和进行缩放vh- 因此每个超过 1920px 的长度测量值都设置为视口宽度或视口高度值。
Transform: scale() 推荐并与此处的其他选项结合使用。5) 将您的所有值设置body为基于特定介质尺寸的百分比，通常使用rem长度值。
rem 将动态调整的值。b)calc在html元素上使用来设置单个单元的大小rem。这将是scale内容。（请阅读上面的链接以将字体大小缩放到屏幕大小）
@media screen (min-width:1980px){
:root {
font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - 1920px) / ( #{$max_width} - 1920) ));
}
.some-other-element {
width: 4rem;
}
}
您应该指定 中使用的每个值的长度值，该calc值不是倍数或除数。因此，计算的结果将是，例如0.22vw。
我理解calc为使用计算操作中变量提供的长度单位，因此只需将结果乘以 1 x 所需的长度单位即可将任何无单位或错误设置的长度单位转换为所需的值单位类型。
Zoom 接受百分比，因此您可以通过执行以下操作强制将结果vw值表示calc(100vw / 1920);为百分比：
zoom: calc(100% * calc(100vw / 1920));
这将为您提供 2500px 的屏幕宽度：
100% * ( 2500px / 1920 ) = 130.2% Zoom value.
以 2880px 为例。
zoom: calc(100% * calc(2880px / 1920)); = 100% * 1.5 = 150% = 1.5
我不知道你是如何计算出这些数字的缩放应该为2的？