[CSS] Media Query
keywords: responsive
, RWD
Using Media Queries @ MDN > Web technology for developers
Media Queries Basic
透過 @media
可以用來定義要套用的
- 媒體類型(Media Type):可用的類型包含
all (default)
,print
,screen
和speech
。 - 媒體特性(Media Feature):常用的類型包含
width
,height
,aspect-ratio
,orientation
,resolution
,這些類型常常需要給定一個區間,像是min
,max
,min-width
,max-width
,min-aspect-ratio
,max-aspect-ratio
。
// 定義媒體類型
@media screen, print {
/* Styles for screen and print devices */
}
// 同時定義媒體類型和媒體特性,中間需用 and 連接
@media screen and (max-width: 650px) {
body {
background: rebeccapurple;
}
}