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-width或max-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) { ... }
沒有留言:
張貼留言