我正在设计一个用于显示文章的网页。主要内容是文章正文，但也有指向相关文章的链接列表。我希望该列表通常显示在文章的一侧，但在以下两种情况下都显示在文章的下方：
我已经通过以下CSS实现了此目标...
.article-sidebar {
text-align: left;
}
@media (min-width: 992px) {
.article-sidebar {
float: right;
max-width: 28%;
}
}
@media (max-width: 991px) {
.article-sidebar {
padding-top: 46px;
border-top: 1px solid #eeeeee;
padding-left: 5%;
padding-right: 5%;
}
}
.article-sidebar-bottom {
text-align: left;
padding-top: 46px;
border-top: 1px solid #eeeeee;
padding-left: 5%;
padding-right: 5%;
}
...加上一些JavaScript，如果该文章具有“宽子级”，该JavaScript会起作用，并删除'article-sidebar'类，并添加'article-sidebar-bottom'类。
但是，我不喜欢> = 991px.article-sidebar和之间的所有样式重复.article-sidebar-bottom。我知道，如果同一类的不同媒体查询之间存在重复，则可以按照此处的说明将它们合并；如果不涉及媒体查询，我可以用逗号分隔CSS选择器，但是有什么方法可以避免在其中重复我自己这个案例？
我现在对此进行了更多研究，并提出了一种解决方案，该解决方案不会以相同的方式复制代码：
.article-sidebar, .article-sidebar-bottom {
text-align: left
padding-top: 46px;
border-top: 1px solid #eeeeee;
padding-left: 5%;
padding-right: 5%;
}
@media (min-width: 992px) {
.article-sidebar {
float: right;
max-width: 28%;
border-top: initial;
padding-left: initial;
padding-right: initial;
}
}
我认为我的问题是我在考虑“自上而下”，即从大屏幕开始，然后在媒体查询中添加对较小设备的支持。如果媒体查询处理的是更大的屏幕，那么我认为它变得更加整洁。
感谢到目前为止发表评论的每个人。尽管我已经找到了解决自己问题的更好的方法，但是我仍然对这个问题的原始措词的答案很感兴趣……例如，是否有人可以提供将相同样式用于不同类和媒体组合的语法？查询（如果存在此语法...）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句