網站佈局隨寬度變化而變化？

有誰知道如何根據瀏覽器寬度完成不同的佈局，就像這兩個網站一樣？網站佈局隨寬度變化而變化？

http://sasquatchfestival.com/

http://css-tricks.com/

我試着谷歌吧，期待通過＃1的問題，看看他們的代碼，但我想我失去了一些東西。它實際上是根據窗口的寬度重新排列和調整一些元素的大小，但是如何？ JavaScript的？

對不起，如果我的搜索技能只是失敗，但我不確定要查找什麼，這裏的「類似問題」似乎並不相關，甚至CSS-Tricks也沒有信息容易找到的地方。

來源

2012-04-01 miahelf

您可以對任務使用JavaScript和/或媒體查詢。 – rcdmk 2012-04-01 04:17:56

研究響應式網頁設計 – SLaks 2012-04-01 04:20:43

媒體查詢，這就是它所謂的！感謝大家！ – miahelf 2012-04-01 05:10:58

您不需要使用JS來檢測瀏覽器寬度。您可以簡單地使用CSS媒體查詢來更改佈局。

例如：

@media screen and (max-width: 1280px) { 
    ... selector(s) here ... 
}

將應用於CSS只對至多1280px寬屏幕。

參見：

來源

2012-04-01 04:27:59 vjvis

我正在創建一個網站，我只是*開始使用媒體查詢，但它看起來不像在頁面加載後動態更改。它應該嗎？ – 2016-10-25 17:50:36

可能在那裏有一點點jMasonry，但它看起來有點像在rails中提供的Twitter Bootstrap，它可能值得在他們的靜態CSS版本上尋找答案。

來源

2012-04-01 04:16:59 BookOfGreg

您可以使用CSS3媒體查詢根據屏幕寬度提供不同的樣式。請參閱此處獲取更多信息：http://www.css3.info/preview/media-queries/

例如，如果您查看sasquatchfestival.com網站的CSS源，則可以看到他們在做什麼：http://sasquatchfestival.com/css/screen.css?v=1328828795。搜索「@media only screen」，你會看到他們提供了不同的CSS，寬度低於768px，寬度768-1024px，高於1024px。

來源

2012-04-01 04:19:06 McGarnagle

可以推倒重來，還是僅僅建立/使用可用的許多敏感的框架之一重建你的網站。我使用了'Skeleton'和'Bootstrap by Twitter'他們的框架可以在...
Skeleton ... [http://www.getskeleton.com/] [1] Bootstrap ... [http ：//twitter.github.com/bootstrap/] [2]

我已經建立了網站使用每個... 骷髏... [http://72t.net] [3] Bootstrap ... [4]

我仍然試圖決定我更喜歡，但現在引導帶似乎提供更多的功能。

來源

2012-04-01 15:32:41 Gfw

網站佈局隨寬度變化而變化？

回答

相關問題