文本未使用@media规则调整大小

Question

Hlo是stackoverflow的新手。在我的网站上，当我试图用@media规则使其响应时，它的大小没有改变。但像颜色这样的其他特性也适用于媒体规则。有人能帮我吗？

CSS代码

@media (orientation: portrait) { 
h2{
font-size : 10px;
}
}

HTML代码

<h2 style="padding-top: 300px;font-size:70px;" class="text-center"><u>MERRY CHRISTMAS</u></h2> 

Answer 1

由于内联css的缘故，内联css将占据最高优先级。如果您在<style>标记或其他css文件中定义内联css规则，它将起作用。

h2{
font-size:70px
}
@media (orientation: portrait) {
h2{
font-size : 10px;
}
}

<h2>Merry Christmas</h2>

否则，如果您想保留内联css，只需添加!important，如下所述。

@media (orientation: portrait) {
h2{
font-size : 10px!important;
}
}

这通常不是一个好的做法