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

我有一个网站有点大的图像，很适合1920/1080窗口，但不是较小的窗口。即使不同的浏览器也会显示其他一些内容。我GOOGLE了很多，但无法找到我需要的东西！缩放浏览器窗口时自动缩放网站

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

这正是我需要的。

这必须用任何类型的jQuery或JavaScript来完成。

有人可以给我一些代码来做到这一点？

2014-02-14 user2197948

这就是所谓的“自适应”设计中，通常大部分是CSS，但也有使用引导或jQuery的 –

请包括截图整齐的方式（[JSFiddle]]（http://jsfiddle.net/）的实际结果和期望的结果以及[最小，完整，测试和可读示例]（http://stackoverflow.com/help/mcve）？，其中的代码也应粘贴在问题中），而不是模糊的描述和链接。 – Dukeling

你可以使用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)";

来源

2014-02-14 14:12:48 user3310252

你的第一个CSS无效..你有一个'}'太多了。 – putvande

感谢您指出我的错误。现在是正确的。 – user3310252

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

回答

相关问题