前端必知必会-CSS媒体查询范例

CSS 媒体查询范例

媒体查询是一种流行的技术，用于向不同设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色：

示例

/* 将 body 的背景颜色设置为棕褐色 */
body {
   
   
background-color: tan;
}

/* 在 992px 或更小的屏幕上，将背景颜色设置为蓝色 */
@media screen and (max-width: 992px) {
   
   
body {
   
   
background-color: blue;
}
}

/* 在 600px 或更小的屏幕上，将背景颜色设置为橄榄色 */
@media screen and (max-width: 600px) {
   
   
body {
   
   
background-color: olive;
}
}

菜单的媒体查询

在此示例中，我们使用媒体查询创建响应式导航菜单，该菜单在不同屏幕尺寸上的设计有所不同。

示例

/* 导航栏容器 */
.topnav {
   
   
overflow: hidden;
background-color: #333;
}

/* 导航栏链接 */
.topnav a {
   
   
float: left;
display: block;
color: white;
text-align: center