@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

Paste_Image.png

1.CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" 
 href="mystylesheet.css">

2.媒体类型mediatype

all 用于所有设备
screen 用于电脑屏幕，平板电脑，智能手机等。

3.媒体功能

Paste_Image.png

设计步骤

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png