使用媒体查询切换显示 < 小时 />

Question

当屏幕宽度低于x像素时，我试图有一个特定的类hr显示。我对媒体查询方面的事情很好，我只是不确定hr元素的显示属性应该是什么，让它显示为标准的100%宽度水平线。

我现在有一个类来隐藏hr元素，如果屏幕尺寸为>1080px

.hrHide {display: none;}

Answer 1

如果你的media-query只是在屏幕大于1080px时隐藏HR，那么默认情况下，当它小于1080px时，它将采用默认的100%宽度显示，不需要重写它。

@media screen and (min-width: 1080px) {
.hrHide {
display: none;
}
}

如果你想确保，你可以使用display: initial，这样浏览器就会给HR默认的显示

@media screen and (min-width: 1080px) {
.hrHide {
display: none;
}
}
@media screen and (max-width: 1079px) {
.hrHide {
display: initial;
}
}

如果你想要显式，设置一个对象占用它的所有水平空间的方法是display: block(顺便说一句，这是默认的浏览器，如firefox给它)

@media screen and (min-width: 1080px) {
.hrHide {
display: none;
}
}
@media screen and (max-width: 1079px) {
.hrHide {
display: block;
}
}