網頁

2021/5/29

CSS 什麼是Media Queries?

CSS的Media Queries的用途如下。


Media Queries中文稱為媒體查詢,為查詢媒體條件的語法並依結果決定是否套用CSS樣式。媒體指的是顯示裝置,例如手機螢幕、筆電螢幕、桌上型螢幕、列表機等。在製作響應式網頁時即可對不同螢幕大小的裝置套用不同的CSS效果。

Media query是個判斷是否為真的邏輯表示式,也就是結果會是true或false。Media query查詢結果為true則套用CSS,反之則否。

Media query的語法是由media query modifier(媒體查詢修飾符)、media type(媒體類型)與零到多個media condtion(媒體條件)搭配組成,而media condtion為一到多個media feature(媒體特徵)組成,以圖示表示如下:




Media Query Modifiers

Media query modifier包括以下:

  • not:否定。當media query結果為true,則加上not的結果為false。
  • only:用來防止老舊媒體無法辨識media query造成的錯誤套用。
<!-- 螢幕寬度'不'在768px內使用style.css -->
<link media="not screen and (max-width:768px) rel="stylesheet" href="style.css">
<!-- 只有裝置為螢幕且寬度在768px內使用style.css -->
<link media="only screen and (max-width:768px) rel="stylesheet" href="style.css">


Media Types

Media type包括以下:

  • all:所有裝置
  • print:印表機及展示列印效果的裝置,例如瀏覽器的預覽列印。
  • screen:print以外的所有裝置。

@media { ... } /* 相當於 @media all { ... }*/
@media all { ... } 
@media print { ... }
@media screen { ... }

不過media types並無法充分區隔不同裝置,因此仍要依賴media features來區別不同媒體的差異。


Media Features

Media features(媒體特徵)語法由feature name後接冒號:與feature value,或單一boolean的feature name,或比較運算子表示的範圍組成並放在括弧中,以圖示表示如下:



例如下面的(max-width:768px)即為一個media feature。

/* 螢幕寬度在768px內所有元素套用font-size: 24px */
@media screen and (max-width:768px){
    * { font-size: 24px; }
}

/* 螢幕寬度在768px內匯入other.css */
@import "other.css" screen and (max-width:768px);


Media queries範例:

在CSS中使用@media@import定義。

style.css

/* 螢幕寬度在768px內所有元素套用font-size: 24px */
@media screen and (max-width:768px){
    * { font-size: 24px; }
}

/* 螢幕寬度在768px內匯入other.css */
@import "other.css" screen and (max-width:768px);

在HTML中使用<link>media屬性定義。

page.html

<!-- 螢幕寬度在768px內使用style.css -->
<link media="screen and (max-width:768px) rel="stylesheet" href="style.css">

測試

新增一個demo.html如下,在<style>的CSS用@media撰寫media query,當螢幕寬度在576px時套用黃色背景。

demo.html

<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width:576px){
    body {
        background-color: yellow;
    }
}
</style>
</head>
<body>
</body>
</html>

在瀏覽器開啟demo.html並調整視窗寬度,可看到視窗寬度超過576px為白色,反之為黃色。




響應式網頁框架如Bootstrap即利用media query搭配mid-widthmax-width依設定多個breakpoints套用適合的CSS樣式來達成響應式網頁的效果,例如:

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }


沒有留言:

張貼留言