Question

谁能帮助我吗？似乎小型设备（最大320px）的特定字体大小不起作用。有人可以帮忙吗？我还包括HTML＆amp; CSS。

我的代码：

＆＃13;

@media all and (max-width: 320px) {
  #titleHome {
    font-size: 4vw;
  }
  #titleHome2 {
    font-size: 2vw;
  }
}

＆＃13;

<div class="home-caption">
  <div id="titleHome" style="font-size:1.8vw; float:left; margin-left:4.5%; color:#black">Random text<br/> & random text</div>
  <div id="titleHome2" style="font-size:1.1vw; float:left; margin-top: 4.8%; color:black">
    Random Text
  </div>
</div>

＆＃13;

Answer 1

这是因为HTML上内联定义的字体大小优先于样式表中定义的字体大小。请将所有样式移到样式表中。

Answer 2

您应该将内联样式移出HTML并进入CSS。

＆＃13;

#titleHome {
  font-size: 1.8vw;
  float: left;
  margin-left: 4.5%;
  color: #000;
}

#titleHome2 {
  font-size: 1.1vw;
  float: left;
  margin-top: 4.8%;
  color: #000
}

@media all and (max-width: 320px) {
  #titleHome {
    font-size: 4vw;
  }
  #titleHome2 {
    font-size: 2vw;
  }
}

＆＃13;

<div class="home-caption">
  <div id="titleHome">Random text<br/> & random text</div>
  <div id="titleHome2">
    Random Text
  </div>

</div>

＆＃13;

Answer 3

尝试将！important添加到字体大小的末尾

@media all and (max-width: 320px){
#titleHome {
font-size: 4vw !important;
}
#titleHome2{
font-size: 2vw !important;
}

Answer 4

<div class="home-caption">              
    <div id = "titleHome" class="titleHome">Random text<br/> & random text</div> 
    <div id = "titleHome2" class="titleHome2">Random Text</div>
</div>

的CSS

.titleHome {
    font-size:1.8vw; 
    margin-left:4.5%;
}

.titleHome2 {
    font-size:1.1vw; 
    margin-top: 4.8%; 
}
.titleHome, .titleHome2 {
    color:#FFFFFF"
    float:left; 
    @media all and (max-width: 320px){
        font-size: 4vw;
    }
}

希望这有帮助

小型手机无法使用的特定字体大小

4 个答案: