Question

我为自己的网站设计了一个仪表板，该仪表板在屏幕上看起来非常漂亮。我的分辨率为1920x1080（100％缩放）。我的仪表板在同事计算机上看起来很糟糕，因为他的3200x1200分辨率为300％。另一个同事是1280x720（150％缩放）。我在弄清楚如何解释所有这些截然不同的屏幕尺寸时遇到困难。

我一直在使用媒体查询和网格系统来根据屏幕尺寸移动某些组件，但是我感觉我没有正确理解处理各种屏幕尺寸的最佳方法。即使我无法测试仪表板在某些屏幕上的显示效果，我也遇到了困难，因为我无法将300％缩放的分辨率设置为3200x1200。

我想发生的事情基本上是设置断点，以确保屏幕等于或小于平板电脑大小，以重新加工我的组件的顺序，但是对于超出此范围的任何事情，基本上都需要缩小屏幕，因此每个笔记本电脑的布局看起来都一样。

为实现这一点，我尝试了以下方法：

`@media (min-width: 1400px) {
    .dashboard {
        zoom:70%;
    }
}

`

但是我听说对于生产站点使用缩放并不明智，因为它不适用于所有浏览器。我也尝试过使用webkit和transform，但是虽然可以缩小仪表板，但也可以缩小整体宽度和高度，因此不再覆盖容器。

这可能被标记为重复问题，但是我发现类似的东西是8年前的，而且方法完全不同。