javascript - 你能根据最小宽度将网站缩放 +200% 吗？

Question

如果不手动更改所有字体/图像 css 代码，这可能是不可能的，但在我这样做之前，我想检查是否有办法做到这一点......

基本上，当您现在在大型显示器(imac 27")上访问我的网站时，它看起来像这样:

但是，如果我 cmd+ 它到 200%，该网站看起来会好很多，看起来像这样(类似于默认的 macbook pro 笔记本电脑分辨率:

我知道我可以做很多自定义更改以使其工作，但想知道是否有一种快速/简单的方法可以根据分辨率使站点缩放 x%？我计划很快改造前端，所以不想在这个短期解决方案上花费很多时间 - 尽管在学术上也对它感到好奇。

也许它就像使容器流畅然后通过 jquery 使背景显示为文档高度的 70% 一样简单？

Answer 1

是的，您可以使用 CSS 媒体查询和缩放属性来做到这一点。 看看下面的代码

/* large desktop */
@media all and (max-width: 1920px) {
    body {
        background-color: pink;
		zoom: 200%;
    }
}

/* small desktop */
@media all and (max-width: 1200px) {
    body {
        background-color: lightblue;
		zoom: 100%;
    }
}

/* tablet */
@media all and (max-width: 1024px) {
    body {
        background-color: orange;
		zoom: 100%;
    }
}

/* mobile phone */
@media all and (max-width: 768px) {
    body {
        background-color: red;
		zoom: 100%;
    }
}

Hello World!