根据最小宽度，你能把网站的比例扩大到+200%吗？

Question

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

基本上，当您现在在一个大型监视器(imac 27")上访问我的站点时，它看起来如下：

​

​

不过，如果我将其设置为200% (类似于默认macbook膝上型计算机解决方案)，该站点看起来要好得多：

​

​

我知道我可以做很多定制的改变使它工作，但想知道是否有一个快速/简单的方法，使一个网站规模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!

​