如何将用户屏幕宽度的CSS变量放入calc函数？

Question

我的网站是在较大的显示器上设计的，其屏幕宽度为2560px（三星32英寸）。因此，必须按比例缩小它才能在任何较小的屏幕上正常显示；例如，一台17英寸屏幕的普通笔记本电脑有一个像素宽度为1366像素。因此，通过除以1366/2560，我们得到了用于CSS transform:scale(calc(1366 / 2560));公式的.53的正确比例百分比。

整个页面都包裹在一个我称为.omniScale的div中

.omniScale {
    display: table; 
    margin:0 auto;
    transform-origin: top left;
    transform:scale(calc(1366 / 2560));
}

这很好用，但是1366无论页面大小，平板电脑，笔记本电脑，中型台式显示器还是更大的显示器，都必须在页面加载时根据用户设备的宽度动态更改。] >

使用100vw而不是有线电话不起作用。我不想使用JavaScript（如果可以避免的话），因此必须对那些已关闭js的人起作用。

我的网站是在较大的显示器上设计的，屏幕宽度为2560px（三星32英寸）。因此，必须按比例缩小它才能在任何较小的屏幕上正常显示；例如，带有...的普通笔记本电脑...

Answer 1

我认为这不是正确的方法。为了使某些内容对所有屏幕都响应，最好使用百分比和@madia。

有关更多信息：https://blog.froont.com/9-basic-principles-of-responsive-web-design/