你可以根据最小宽度将网站缩放+ 200％吗？

Question

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

基本上，当您现在在大型显示器（imac 27“）上访问我的网站时，它看起来像这样：

然而，如果我将它看起来像这样的200％看起来像这样的网站看起来好多了（类似于默认的macbook pro笔记本电脑分辨率：

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

也许它就像制作容器流体和液体一样简单;然后通过jquery使背景显示为文档高度的70％？

Answer 1

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

＆＃13;

＆＃13;

/* 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%;
    }
}

＆＃13;

Hello World!

＆＃13;

＆＃13;

＆＃13;