基本例子
@media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
上述媒体查询指定了两个条件:
- 必须在普通屏幕(不是打印页面,投影仪等)上查看页面。
- 用户视口的宽度必须至少为 720 像素。
如果满足这些条件,则媒体查询中的样式将处于活动状态,并且页面的背景颜色将为天蓝色。
媒体查询是动态应用的。如果在页面加载时满足媒体查询中指定的条件,则将应用 CSS,但如果不再满足条件,将立即禁用 CSS。相反,如果最初不满足条件,则在满足指定条件之前不会应用 CSS。
在我们的示例中,如果用户的视口宽度最初大于 720 像素,但用户缩小浏览器的宽度,则一旦用户将视口大小调整为小于 720 像素,背景颜色将不再是天蓝色。宽度。