CSS mobile - 文本不会调整大小

Question

我正在尝试将移动版本添加到一个简单的网站，但我似乎无法在更改窗口大小时调整任何文本大小。举一个页面上的例子，我试图让#bannerText 中的文本调整大小并分散字母间距。 #bannerText 的唯一父母是正文 > 页面 > 横幅。以下是代码的重要sn-ps：

body{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-size:16px;
}

.page { 
   position: relative;
   margin-left:auto;
   margin-right:auto;
   background-color: rgba(255,255,255,0.4);
}

.banner a{
font-weight:bolder;
font-family: sans-serif, Verdana, Geneva;
color: black;
text-decoration: none;
}

.banner p{
 margin:0px; 
 }


/* ----Mobile only---- */

@media screen and (max-width:480px){

 body{
   background-image: url("images/mwater.jpg");
   background-size:100%;
 }

 .banner{
   margin: 2%;
   padding-top: 4%;
   opacity: 0.7;
 }    

 #bannerText{
   font-size:0.8em;
   text-align: center;
   letter-spacing: 0.4em;
   margin-bottom:10%;
  }  

我尝试过的事情包括：

确保我在

中有正确的标签

在正文和横幅文本中将字体大小更改为 %

经过多次尝试和搜索，我真的看不出哪里出错了。

请帮忙，谢谢！

Answer 1

试试font-size:0.8em !important;