0

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

http://www.kenzo.com

令人惊讶的是，中心的盒子在小屏幕电脑上更小，但在大屏幕电脑上却大得多。你是怎样做的？

我在想 CSS 样式中的“定位”可能会奏效，所以我尝试设置 left:0% 和 right:0%。但我发现它只是让图像居中，在大屏幕电脑上没有放大。

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

4

2 回答 2

1

我检查了 kenzo.com 的代码：他们使用 JavaScript（和 jQuery）来获得这种效果。就像是：

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

但这不是必需的，我什至认为这是不好的做法。

您宁愿media queries为不同的视口或屏幕分辨率使用不同的 css 样式。看看这篇非常有用的文章：

MSN：CSS 媒体查询

Smashing Magazine：如何使用 CSS3 媒体查询...

于 2012-10-11T12:31:00.277 回答
1

无论如何，这里是样本。核实。在演示中重新调整结果部分的大小以查看效果

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; }​

现场演示

于 2012-10-11T12:24:07.190 回答