我正在尝试根据不同的屏幕尺寸设置 3 种不同的 Logo 尺寸(small
、med
、big
)。这是我的代码:
@media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
@media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
@media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
这可以从 big
切换到 med
,但它不会再从 med
切换到 small
.为什么?
最佳答案
也尝试在第二个媒体查询中使用最小宽度。即使屏幕很小,第二个查询也是正确的,最后一个 css 得到优先权,因此它加载第二个查询图像。 进行以下更改。
@media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
@media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
关于css - 用媒体查询交换 3 个不同大小的 Logo ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21400065/