我正在制作响应式设计，我希望其显示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)); …
css ×1