使用媒体查询覆盖原始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;
}

更改为最小高度：48px适用于移动设备，但不适用于桌面设备。我想将其更改为仅适用于移动设备上。 请问我哪里出错了。我尝试了这个过程。

@media (max-width:767px) {

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

当应用时，最小高度也应用于桌面。我想知道如何设置最小高度：仅在移动设备上设置48px，在其他任何设置上设置高度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;    
}
}