CSS 程式札記 : Media Queries 媒體查詢

本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁，在現今多裝置的網頁環境下，可以透過 CSS Media Queries 來讓我們根據不同的裝置特性，如螢幕尺寸、解析度等，來應用不同的樣式規則。

什麼是 CSS Media Queries？

我們如果想要讓網頁在不同的裝置上都能正常顯示，就會使用到 CSS Media Queries，CSS Media Queries 可以讓我們根據裝置的類型(Type)和特徵(Feature)，比如螢幕裝置或螢幕大小，來設定不同的 CSS 樣式，簡單來說，就是讓網頁能夠適應不同的裝置。

CSS Media Queries 屬性

CSS Media Queries 主要是透過條件語法和媒體規則 : Media Type、Media Feature 所組合而成的 :

條件語法

• not : 如果想讓A裝置有某樣式而B裝置沒有，可以使用@media A not B來達成。
• and : 用來表達兩側條件都成立時，整個條件才成立，它常用來串接Media Feature。

Media Type

• all：適用於所有裝置（默認為all）。
• print：適用於印表機。
• screen：適用於螢幕，包括電腦、平板、手機等等。

Media Feature

• width : 用來判斷裝置的寬度，可以使用min-width和max-width分别是最小寬度和最大寬度。
• height : 用來判斷裝置的高度，可以使用min-height和max-height分别是最小高度和最大高度。
• orientation : 用來判斷目前裝置的螢幕方向處於 直立 還是 橫向。

以下是透過條件語法與媒體規則組合成的 CSS Media Queries

/* 當裝置寬度介於720~1200px之間時，h1的字體大小為40px */
@media screen and (max-width: 1200px) and (min-width: 720px) {
  h1 {
    font-size: 40px;
  }
}

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡