在缩放浏览器窗口时自动缩放网站

Question

我有一个有点大图像的网站很适合1920/1080窗口，但不是小窗口。即使是不同的浏览器也向我展示了一些其我用Google搜索了很多，但找不到我需要的东西！

我在这里有一个例子：http://www.serialcut.com/

这正是我所需要的。

这必须使用任何类型的jQuery或JavaScript。

有人可以给我一些代码吗？

Answer 1

您可以使用 CSS3 转换和媒体查询。

http://www.w3.org/TR/css3-transforms/
http://www.w3.org/TR/css3-mediaqueries/

然后，您的页面将根据css样式表中媒体查询设置的规则进行调整：

@media screen and (min-width:1200px) {

    #container {

        width:1100px;

    }  

    header h1#logo a {

        width:1100px;
        height:150px;
        background:url(image.jpg) no-repeat 0 0;

    }                          

}

您还可以通过设置其转换属性来缩放，旋转，移动等页面中的任何元素：

div {

  transform: scale(2) rotate(45deg);
  transform: scale(2) rotate3d(0, 0, 1, 45deg);

}

如果您愿意，可以通过纯JavaScript代码访问此属性：

document.querySelector('div').style.webkitTransform="scale(3)";