css - 使用媒体查询覆盖原始 CSS

Question

我创建了一篇文章标题 css 代码，从一篇文章中，我得到了如何通过更改来修复标题重叠的解决方案

#Article_Header2 {
height: 48px;
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;
}

到

#Article_Header2 {
min-height: 48px;
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;
}

更改为 min-height: 48px 非常适合移动设备，但不适用于桌面设备。我想将其更改为仅在移动设备上应用。 请问我哪里错了。我尝试了以下方法。

@media (max-width:767px) {

    body #Article_Header2 {
        min-height: 48px;
        font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
        margin: 0px;
    }
}

应用时，最小高度也会应用于桌面。我想知道如何仅在移动设备上设置 min-height: 48px 并在其他任何设备上设置 height 48px 。

Answer 1

由于高度和最小高度是不同的属性，所以一个不会覆盖另一个。

#Article_Header2 {
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;    
}

@media (min-width:768px) {
#Article_Header2 {
height: 48px;        
}
}

@media (max-width:767px) {
#Article_Header2 {
min-height: 48px;    
}
}