媒體查詢

針對不同裝置，套用不同的樣式與適合閱讀的文字大小

常用關鍵字

all

screen

print

Queries

and

not

only

視窗大於768px時才套用樣式

code:css

@media (min-width: 768px) {

/* ... */

}

視窗小於768px時才套用樣式

code:css

@media (max-width: 768px) {

/* ... */

}

視窗介於768px至1024px之間時套用樣式

code:css

@media (min-width: 768px) and (max-width: 1024px) {

/* ... */

}

範圍寫法

code:css

@media (width <= 768px) {

/* ... */

}

判斷裝置設定是否有啟用減少動態效果

@media (prefers-reduced-motion: reduce) {}

prefers-color-scheme

interaction media features

以手機頁面呈現為優先設計

將手機頁面的圖片設定為100%

如果先寫桌機版，再複寫設定到手機版，對手機耗電量大，效能也會較差

設定檢視區

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用CSS3 Media queries @media針對不同寬度的瀏覽器提供適合的頁面樣式

盡量使用相對寬度

使用流動性/比例式網格系統

五大外觀設計模式

1. 主體為流動

mostly fluid

2. 欄內容下排

column drop

3. 版面配置位移

layout shifter

4. 微小調整

tiny tweaks

5. 畫布外空間利用

off canvas

使用相對比例的響應式大小圖片與影片

使用video元素來載入、播放影片

使用多種格式的影片，以便在多種行動平台上播放

正確設定影片大小，確保你的影片不會超出容器

請為video元素新增track子元素