使用媒体查询引导程序更改字体大小/系列时出现问题

Question

>我在中等大小的屏幕上的字体大小为 30px，但我需要在超小屏幕上将字体大小减小到 10px，所以我尝试使用媒体查询。

但是我在这里遇到了一个不寻常的问题，如果我尝试更改背景颜色，它可以工作，但字体大小更改不起作用。

以下是我的 CSS：-

@font-face {
   font-family: myFirstFont;
    src: url(../fonts/JosefinSlab-regular.ttf);
 }
.frontback{
font-family:myFirstFont;
font-size:30px;
margin-top:10%;
}
@media screen and (max-width: 480px) {
.frontback{
       font-family:myFirstFont;
        font-size:10px;     
        background-color:red;
   }       
}

当我减小屏幕尺寸时，背景颜色发生了变化，但字体大小没有改变。有人可以帮我吗？

Answer 1

@media screen and (max-width: 480px) {
.frontback{
       font-family: myFirstFont;
        font-size: 10px !important;     
        background-color:red;
   }       
}

请尝试此:)