如何在大型計算機上查看我網站上的所有內容？

我想提出一個單頁網站，並希望達到類似的效果，因爲這kenzo的網站：如何在大型計算機上查看我網站上的所有內容？

http://www.kenzo.com

令人吃驚的是，在中央的盒子是怎麼小屏幕電腦上規模較小，但大屏幕上大得多電腦。你是怎樣做的？我想在CSS風格的「定位」可能會做到這一點，所以我試着設置左：0％和右：0％。但是我發現它只是讓圖像中心位於中間，而不是在大屏幕電腦上放大。

任何人有任何想法解決這個問題？

來源

2012-10-11 user1735546

@Sowmya - 引述了一個問題：「我想‘在CSS樣式定位’可以做的伎倆，所以我嘗試設置左：0％和右：0％，但我發現它只讓圖像中心位於中間，而不是在大屏幕電腦上放大。「 – Quentin

你應該閱讀[響應式網頁設計]（http://en.wikipedia.org/wiki/Responsive_web_design）沒有一個單一的CSS技巧可以確保一致的結果。如果你只是想爲圖像，你可能需要'寬度：100％' –

你鏈接到一個Flash網站。這個效果還沒有用css完成。 – KingCronus

反正這裏是樣本。覈實。重新大小的演示結果部分，看看效果

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

來源

2012-10-11 12:24:07 Sowmya

我檢查kenzo.com代碼：他們使用JavaScript（和jQuery）來獲得這種效果。例如：

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

但這不是必要的，我甚至會認爲它是不好的做法。

你寧願使用media queries爲不同的視口或屏幕分辨率使用不同的CSS樣式。看看這個非常有用的文章：

MSN: CSS media queries

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

來源

2012-10-11 12:31:00 AvL

如何在大型計算機上查看我網站上的所有內容？

回答

相關問題