學習資訊部落

一、意思

使用媒體查詢是一種流行的技術，可以向筆記本電腦，平板電腦和手機提供定制的樣式。

媒體查詢可用於檢查以下事情，例如：

1. 視窗的寬度和高度
2. 設備的寬度和高度
3. 方向（平板電腦/手機處於橫向還是縱向模式？）
4. 解析度

二、用法
1. media：
screen：用於計算機屏幕，平板電腦，智能手機等。
print：用於印表機
handheld：手持式
aural：聽覺設備
braille：盲文點字機設備
projection：投影設備
tty：聽障人士使用的 Teletype 機器
tv：電視

2. orientation：方向
width：寬度
min-width：最小寬度
max-width：最大寬度
min-height：最小高度
max-height：最大高度
height：高度
min-resolution：最小解析度
max-resolution：最大解析度
resolution：解析度
min-device-aspect-ratio：最小設備長寬比
max-device-aspect-ratio：最大設備長寬比
device-aspect-ratio.. 設備長寬比
min-aspect-ratio：最小長寬比
max-aspect-ratio：最大長寬比
aspect-ratio：長寬比
min-device-width：最小設備寬度
max-device-width：最大設備寬度
device-width：設備寬度
min-device-height：最小設備高度
max-device-height：最大設備高度
device-height：設備高度

三、寬度不同就變背景顏色
0到900為#D03638
900到1500為#C75CF0

<style type="text/css">
@media (max-width:900px){
body {
    background-color: #D03638;
}
}
@media (max-width:1500px) and (min-width:900px){
body {
    background-color: #C75CF0;
}
}
</style>