0

私は単一ページの Web サイトを作成しており、この kenzo Web サイトと同様の結果を達成したいと考えています。

http://www.kenzo.com

中央のボックスが小さな画面のコンピューターでは小さいのに、大きな画面のコンピューターでははるかに大きいのは驚くべきことです。どうやってそれをしますか?

CSSスタイルの「配置」がうまくいくのではないかと思ったので、左:0%、右:0%に設定してみました。しかし、大画面のコンピューターで画像を拡大するのではなく、画像を中央に配置するだけであることがわかりました。

誰でもこれを解決するアイデアはありますか?

4

2 に答える 2

1

kenzo.com のコードを確認しました。JavaScript (および jQuery) を使用してその効果を得ています。何かのようなもの:

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

しかし、これは必要ではなく、悪い習慣だとさえ思います。

media queriesビューポートまたは画面解像度ごとに異なる css-Styles を使用する必要があります。この非常に役立つ記事をチェックしてください。

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 に答える