如何對網頁中的樣式更改做出反應？

讓我們假設我們有一個響應式設計的網頁，它使用媒體查詢來實現三種不同的視圖：屏幕，手持和打印。讓我們進一步假設，這樣一個網頁包括幾個基於JS的，依賴於視圖的佈局修復，導航邏輯，內容生成宏和類似的東西，其原因可能或多或少有爭議。如何對網頁中的樣式更改做出反應？

現在，請想象用戶通過調整瀏覽器窗口大小和打印內容來玩我們的設計。我們希望對樣式變化（由瀏覽器執行）作出反應，以便重新計算佈局修復，重新生成動態內容，重新排列導航或其他任何內容。但是，我們的腳本沒有「onMediaChange」事件來處理，是嗎？那麼，Web開發人員以何種方式將媒體驅動風格與獨立於媒體的邏輯同步？

這個問題在幾種形式和開發環境中，已經在StackOverlow上問了好幾年了，但是還沒有給出有回報的答案。有使用基於寬度的條件的解決方法，但這些既不處理打印視圖，也不會對頁面加載後發生的寬度更改做出反應。其他一些CSS嗅探解決方案基於可疑和不雅的投票。我在尋找的是一個通用，優雅，符合標準的客戶端解決方案，用於使JS和CSS與媒體更改同步。二不存在，理想的解決方案可能是：

的onMediaChange事件的存在，如：

document.addEventListener('onMediaChange', myHandler, false);

與link標記附加腳本的可能性，如：

<link rel="script" media="print" type="text/javascript" href="print.js"/>

我會感謝任何現有的解決方案，創造性的建議，理論評論甚至超出這個問題範圍的哲學討論。

來源

2013-04-28 Krzysztof Abramowicz

如果您認爲調整大小是唯一會觸發您的響應式設計的問題，那麼爲什麼不附加'resize'事件偵聽器？ – MaxArt 2013-04-28 15:48:37

窗口大小調整僅僅是一個例子。我正在尋找一個通用的解決方案，它將JS和CSS與媒體查詢機制同步（或者是一個很好的方法）。例如，我想調用一個JS函數來重新格式化文檔以進行打印。 – 2013-04-28 16:10:17

也許這樣：http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/ – bfavaretto 2013-04-28 18:20:47

我認爲你正在尋找window.matchMedia API：

https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia

基本上，它會告訴你附加一個事件偵聽器，媒體查詢。您可以將其與append()方法配對以添加/刪除dinamically <link>標籤。

不幸的是，據我所知，它在舊瀏覽器中得不到很好的支持，但是使用polyfill（如this one）可能會獲得全局的跨瀏覽器支持。

來源

2013-05-09 16:56:57 skz

如何對網頁中的樣式更改做出反應？

回答

相關問題