在飛行JQuery調整大小

Question

我正在與一個響應式設計網站，更具體地說，合併了幾個Divs的頁面。當您重新調整網頁大小時，div的寬度會隨着百分比而變化。由於身高必須保持不變，除非div將消失，所以我必須設置斷點來改變身高。如果我不改變高度，它會保持不變，並在下面的div之間添加「margin」。本質上，我的邏輯是：當窗口重新調整大小並且寬度小於810px時，然後刪除所有CSS樣式，並添加margin margin，項目2到infinity。由於這很難通過編寫來解釋，因此我在末尾添加了以下代碼。

當我重新調整瀏覽器窗口大小，並且內容div小於810px時，樣式不會被刪除。看着我的代碼，可能是什麼罪魁禍首？

功能是在線路27-50：https://github.com/jdmagic21/coded_container/blob/master/work.js

Answer 1

而不是使用JavaScript這樣做，你應該考慮使用CSS媒體查詢來改變依賴於瀏覽器的寬度的樣式。

Here's a tutorial - one of the top hits on Google for "How to use CSS Media Queries"

Here's a table of browser compatibility for Media Queries. As long as you don't care too much about IE8 or previous, you're ok!

Answer 2

您可以使用CSS媒體查詢像這樣做。

@media screen and (max-width: 810px) { 
    /* reset the styles of the divs here */ 
}