使用媒体查询
时间: 2023-07-20 10:05:13 浏览: 54
媒体查询是一种CSS技术,可以根据设备的屏幕大小、分辨率、方向或其他属性来应用不同的样式。以下是使用媒体查询的基本语法:
```
@media screen and (max-width: 768px) {
/* 在视口宽度小于或等于 768px 时应用的样式 */
}
```
这个例子展示了一个简单的媒体查询,其中包含一个条件(屏幕类型为 `screen`,最大视口宽度为 `768px`)。在这个条件下,我们可以定义一些需要应用的CSS样式。
还有其他可用于媒体查询的条件,例如:
- `min-width`: 最小视口宽度
- `orientation`: 屏幕方向(横向或纵向)
- `max-device-width`: 最大设备宽度
- `min-resolution`: 最小分辨率
下面是一个使用媒体查询的完整示例:
```
/* 应用于所有设备 */
body {
font-size: 16px;
}
/* 应用于小屏幕设备 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
/* 还可以定义其他样式 */
}
/* 应用于大屏幕设备 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
/* 还可以定义其他样式 */
}
```
在这个例子中,我们首先定义了一个 `body` 元素的全局样式,然后使用媒体查询根据不同的设备屏幕大小应用不同的字体大小。在小屏幕设备上,字体大小为 `14px`,而在大屏幕设备上,字体大小为 `18px`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)