Question

我正在创建一个单页网站，并希望获得与此kenzo网站类似的结果：

http://www.kenzo.com

令人惊讶的是，中央的盒子在小屏幕电脑上的尺寸较小，但在大屏幕电脑上则要大得多。你是怎么做到的？

我在想CSS风格的“定位”可能会有所帮助，所以我尝试设置左：0％和右：0％。但我发现它只会使图像中心位于中间，而不是在大屏幕电脑上放大。

有人有任何想法解决这个问题吗？

Answer 1

无论如何这里是样本。核实。重新调整demo中的结果部分以查看效果

HTML

<div class="wrapper">
<header></header>
<div class="content"><img src="http://4.bp.blogspot.com/-yAOYE3-J1mo/TmsnBJ6ucYI/AAAAAAAABcA/5ZKqEv3p-6I/s1600/36676-sky_blue.jpg" /></div>
<footer>footer</footer>
</div>

CSS

body{margin:0; padding:0}
.wrapper{width:100%;}
header{height:60px; background:green}
.content{position:relative; padding:30px; background:grey; }
.content img{max-width:100%}
footer{height:40px; background:red; }

LIVE DEMO

Answer 2

我查过了kenzo.com的代码：他们使用JavaScript（和jQuery）来获得这种效果。类似的东西：

$(window).resize(function(){
    $('.content').css('width', $(this).width()/2);
});

但这不是必要的，我甚至认为这是不好的做法。

您宁可使用media queries为不同的视口或屏幕分辨率设置不同的css-Styles。看看这些非常有用的文章：

MSN: CSS media queries

Smashing Magazine: How To Use CSS3 Media Queries...

如何在更大的计算机上查看我网站上的所有内容？

2 个答案: