調整瀏覽器大小時縮放內容

我在網站上工作，並希望縮放瀏覽器窗口的大小時縮放內容。這是我想要achieve的一個例子。繼續並重新調整瀏覽器的大小以查看我的結果。有人能告訴我作者是如何做到的？或者這種技術被稱爲什麼？我已經很好地掌握了CSS並瞭解液體佈局，但本網站使用的技術非常獨特。我無法圍繞他如何設計網站的很多部分進行縮放，即使是邊上的小圖片縮小了。有人能告訴我這是如何實現的嗎？我真的是在技術的概念或名稱之後。謝謝。調整瀏覽器大小時縮放內容

來源

2011-12-16 aziz punjani

它被稱爲響應式設計，並且有關於此主題的pretty good book。

簡而言之，它利用媒體查詢來調整您的內容以適應各種分辨率。

/* targets screens matching the specific sizes */ 
@media screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) { 
    /* css rules here */ 
} 

@media screen 
    and (min-device-width: 481px) 
    and (max-device-width: 960px) { 
    ... 
} 

@media screen and (min-device-width: 961px) { 
    ... 
}

大小都將非常根據您的內容有多寬是和你使用什麼樣的佈局，所以你必須要瞄準最適合您需要的具體尺寸。當然，除此之外，還有更多的資源和教程。

來源

2011-12-16 20:29:02 scurker

Here's a link from "A List Apart"。他們使用流體網格和媒體查詢來確保窗口的內容大小。該文章有代碼，以便您可以看到發生了什麼。

來源

2011-12-16 20:29:36

我認爲這是這條線，因爲我檢查了他的CSS和JavaScript函數，沒有什麼。試試看看它是否有效。

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">

來源

2011-12-16 20:33:49 Andres

不完全，但你很接近。視口通常設置爲針對響應式佈局進行修復，因爲您應該已經定位了一定尺寸的一組尺寸，所以您不希望瀏覽器在這些實例中嘗試縮放視口，而是適應實際的寬度設備。 – scurker 2011-12-16 20:38:34

調整瀏覽器大小時縮放內容

回答

相關問題