使用window.matchMedia（）匹配多個CSS媒體查詢（7）

這是完整的JavaScript：

我們處理函式中的邏輯被設定，因此程式碼的每個部分彼此不相互排斥 -  (max-width: 600px) 例如， 當查詢“  ”匹配 時，“  ”也是如此 (max-width: 840px) ，反之亦然，所以我們不應該使用“  else ”宣告跟隨每個“  if ”宣告以捕捉“對立”條件，這可能是眾多之一。 相反，只需逐步執行我們的程式碼，並在最後測試時，何時兩個查詢都不匹配，以檢測何時佈局既不是840px也不是600px寬。

現在，看看這一行：

在 if 佈局為840px或更低時匹配 的“  ”子句 內部 。 它可能看起來多餘 - 畢竟， leftcolumn 當螢幕寬度超過840px時 ，我們已經設定“  ”顯示“180px”，所以進入840px，為什麼重複相同的動作？ 原因是我們還需要考慮在相反方向發生的事件 - 即從窄螢幕（即：640px或更小）到更寬螢幕（即：840px或更高）。 在640px階段，“  leftcolumn ”文字被替換為“Fluid（響應佈局觸發）”。 當使用者將瀏覽器的大小調整回840px或更高時，需要程式碼撤消在640px階段完成的操作。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2653431/，如需轉載，請註明出處，否則將追究法律責任。