40 lines
1.5 KiB
Markdown
40 lines
1.5 KiB
Markdown
|
---
|
|||
|
|
title: CSS3 at Media Rule
|
|||
|
|
localeTitle: 媒体规则的CSS3
|
|||
|
|
---
|
|||
|
|
## 媒体规则的CSS3
|
|||
|
|
|
|||
|
|
CSS3 Media规则是允许使用媒体查询的规则。媒体查询可以允许您根据不同的媒体类型或设备对网页（部分或全部）进行不同的样式设置。
|
|||
|
|
|
|||
|
|
使用`@media`标记创建媒体查询，然后提供规则以检查以下内容：
|
|||
|
|
|
|||
|
|
* 当前视口的宽度和高度
|
|||
|
|
* 设备的方向（这适用于平板电脑或手机）
|
|||
|
|
* 目前的决议
|
|||
|
|
* 和更多
|
|||
|
|
|
|||
|
|
目前有四种可能的媒体类型：
|
|||
|
|
|
|||
|
|
* all（默认 - 这将针对所有设备）
|
|||
|
|
* 打印（用于打印机;例如提供单独的打印样式）
|
|||
|
|
* 屏幕（用于电脑，手机，平板电脑等）
|
|||
|
|
* speech（用于屏幕阅读器等网页内容的辅助设备）
|
|||
|
|
|
|||
|
|
媒体查询用于各种各样的purporses，因为它们允许许多不同的媒体功能。媒体查询最常见的用途之一是使网页响应;意味着它会根据屏幕大小而有所不同。
|
|||
|
|
|
|||
|
|
媒体查询示例如下：
|
|||
|
|
|
|||
|
|
```CSS
|
|||
|
|
@media screen and (max-width: 1000px) {
|
|||
|
|
body {
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
媒体查询规则中的CSS仅在规则成立时适用。例如，查看上面的代码段，只有当用户使用1000px或更小的设备访问该页面时，正文背景才会更改为`#000` 。如果超过1000px，该规则将不适用。
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
* [CSS @media规则](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
|
|||
|
|
* [使用媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
|