CSS移动版-文本不会调整大小

Question

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

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%;
  }  

我尝试过的事情包括：

确保我的标签正确

将正文和bannerText中的字体大小更改为％

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

请帮忙，谢谢！

Answer 1

试试font-size:0.8em !important;