如何在 JavaScript 中使用媒體查詢

在 html 插入 css 時加條件。 在 css 插入 css 時加條件。 在使用 css 時加條件 media type 是 all時，可以省略。 @media 的條件可以用 , 和 and組成。 1. , 和 CSS 的 Combinators 一樣 2. and就是「邏輯 AND」 如果沒有給 media type 和 條件式，結果 always true 在寫 media query</b> 一開始，可以用 not做「邏輯 NOT」 對於比較舊的 CSS 可以用 only 給 IE 可以在 @

Media Query是什麼？ Media Query是一種在CSS3中提供的功能，它讓網頁設計師可以根據使用者的螢幕尺寸、解析度等媒體屬性，動態調整網頁元素。 簡單來說，Media Query就像是一個智慧型開關，能自動為不同裝置呈現最適合它的版面配置。

如果要在不同解析度的螢幕上瀏覽同一個網頁，常常會透過 CSS 的方式製作 RWD 響應式網頁，而 CSS 的 @media 媒體查詢可以定義判斷不同媒體的條件，只要符合條件，就會替這種媒體套用對應的 CSS 樣式屬性，這篇教學會介紹 CSS @media 媒體查詢 ( Media Queries ) 的相關用法。 搭配教學影片一起閱讀，效果會更好！ 歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。

媒體查詢在 CSS3 中引入，是響應式網頁設計的關鍵要素之一。 媒體查詢用於確定視口的寬度和高度，以使網頁在所有裝置（桌上型電腦、筆記型電腦、平板電腦、手機等）上看起來都很好。 window.matchMedia () 方法返回一個 MediaQueryList 物件，該物件表示指定 CSS 媒體查詢字串的結果。 matchMedia () 方法的值可以是 CSS @media 規則 的任何媒體特性，例如 min-height、min-width、orientation 等。 在我們的 CSS 媒體查詢

CSS Media Queries 媒體查詢 Media Queries (媒體查詢) 可以根據裝置的特性（如螢幕寬度、方向等）套用不同的 CSS 樣式，是實現響應式網頁設計的核心技術。 基本語法 @media 媒體類型 and (媒體特性) /* CSS 規則 */ } 範例 /* 螢幕寬度小於 768px 時套用 */ @media (max-width: 768px)