前端提高篇CSS进阶10Media媒体查询，网站前端开发
在CSS中，媒体查询（Media Queries）是一种强大的功能，它允许我们根据设备的特性（如屏幕尺寸、分辨率、是否可触摸等）来应用不同的样式规则。
以下是一个简单的媒体查询示例，它会在屏幕宽度小于600像素时应用特定的样式规则：
/* 在标准屏幕上的样式 */
body {
background-color: white;
color: black;
}
/* 在屏幕宽度小于600像素时应用的媒体查询 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
color: white;
}
}在上述代码中，@media screen and (max-width: 600px) 是媒体查询规则，它告诉浏览器在屏幕宽度小于600像素时，应用其中的CSS规则来覆盖默认的样式。
媒体查询不仅可以用于响应式设计，还可以用于其他场景，例如针对打印机进行样式设置、针对视觉障碍者提供更好的可访问性样式等。
评论已关闭