在窗口上設置產品滑塊寬度與CSS媒體查詢一起調整大小

Question

我有一個正在使用的產品滑塊，現在我試圖減小寬度以適應小型視口 ，這種方式不太好。

代碼首先加載文檔時加載每個產品項目的寬度 並且單擊按鈕時發生幻燈片。

我的問題是，當視口變小時，每個產品項目將變得更窄（使用CSS媒體查詢處理），現在使用腳本，它需要在瀏覽器窗口重新調整大小時重新計算媒體查詢中指定的新寬度。

我試圖重構爲一個函數或變量，並通過它在resize() 但沒有運氣看到總與resize事件計算。 我應該分開事件和功能，但然後我面臨一些可變範圍問題。

請參閱My JSFiddle Demo

我理解這可能是對於普通用戶來說沒有用，但我想給它一個嘗試。

Answer 1

您可以使用匹配的媒體

if (window.matchMedia("(max-width: 480px)").matches) { 
//code for window less than 480px 

} 
else 
{ 
} 

Match Media Documentation