媒体查询media及案例
时间: 2023-08-04 22:03:38 浏览: 50
媒体查询(Media Queries)是CSS3新增的一个模块,它允许开发者根据设备的特性(如屏幕尺寸、分辨率、设备方向等)来自适应地调整页面的样式。媒体查询通常用于响应式设计,以提供在不同设备上获得最佳用户体验的布局和样式。
媒体查询语法如下:
```
@media mediatype and (expressions) {
/* 在这里写 CSS 规则 */
}
```
其中,mediatype 指的是媒体类型,如 all(所有设备)、screen(屏幕设备)、print(打印设备)等;expressions 是一个或多个条件表达式,用于指定设备的特性。
以下是一些媒体查询的案例:
1. 隐藏小屏幕下的导航栏
```
@media screen and (max-width: 768px) {
.navbar {
display: none;
}
}
```
2. 调整字体大小以适应不同屏幕
```
@media screen and (max-width: 1024px) {
body {
font-size: 16px;
}
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
```
3. 调整图片大小以适应不同屏幕
```
@media screen and (max-width: 768px) {
img {
width: 100%;
}
}
```
4. 调整布局以适应横竖屏切换
```
@media screen and (orientation: portrait) {
/* 竖屏样式 */
}
@media screen and (orientation: landscape) {
/* 横屏样式 */
}
```
以上是一些媒体查询的案例,开发者可以根据实际需求灵活运用媒体查询来为不同的设备提供最佳的用户体验。