@media-query
时间: 2023-08-21 20:12:29 浏览: 47
@media查询是CSS3的新语法,用于根据不同的媒体类型和媒体特性来应用不同的样式规则。它的语法规范如下:@media mediatype and|not|only (media feature) { CSS-Code; } \[1\]\[2\]
其中,@media开头表示开始一个媒体查询规则,mediatype表示媒体类型,and、not、only是关键字用于连接媒体特性,而media feature则是指媒体特性,必须用小括号包含。在大括号内部,可以编写需要应用的CSS代码。\[1\]\[2\]
举个例子,可以根据页面宽度来改变背景颜色。比如,当页面宽度小于499像素时,背景颜色为红色;当页面宽度在500像素到799像素之间时,背景颜色为绿色;当页面宽度大于800像素时,背景颜色为蓝色。具体的代码如下:
@media screen and (max-width: 499px) {
body {
background-color: red;
}
}
@media screen and (min-width: 500px) {
body {
background-color: green;
}
}
@media screen and (min-width: 800px) {
body {
background-color: blue;
}
} \[3\]
这样,根据不同的页面宽度,背景颜色会相应地改变。
#### 引用[.reference_title]
- *1* [媒体查询(Media Query)](https://blog.csdn.net/HIRAETHZY/article/details/121387515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [媒体查询(Media Query)](https://blog.csdn.net/weixin_45650502/article/details/123903833)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]