Question

我已经阅读了其他问题，并试图使我的文本在某个断点处变得敏感。但是，当我保存它并不能缩放时，它只会占用我的字体大小：60px;值。最小宽度表示px值是否大于或等于，反之亦然，表示最大宽度正确吗？所以从理论上讲，这应该起作用吗？

@media only screen and (min-width: 1024px){
    .et_pb_text_2 h3{
       font-size: 60px;
   }
    .et_pb_text_5 h3{
       font-size: 60px;
   }
}

@media only screen and (max-width: 1023px){
    .et_pb_text_2 h3{
       font-size: 4vw!important;
   }
    .et_pb_text_5 h3{
       font-size: 4vw!important;
   }
}

Answer 1

能否请您说明您面临的问题或共享HTML？我已经为此创建了HTML，并且效果很好。

在1024px屏幕以下，字体大小为4vw。这意味着当屏幕尺寸小于1024px时，字体大小将仅占视口宽度的4％。当屏幕尺寸等于或大于1024px时，字体大小将保持在60px。

请参见下面的代码，它运行良好。

.et_pb_text_2, .et_pb_text_5 {
    display: inline-block;
}
@media only screen and (min-width: 1024px){
  
 .et_pb_text_2 h3{
    font-size: 60px;
  }
  .et_pb_text_5 h3{
    font-size: 60px;
  }
}

@media only screen and (max-width: 1023px){
  .et_pb_text_2 h3{
    font-size: 4vw!important;
  }
  .et_pb_text_5 h3{
    font-size: 4vw!important;
  }
}

<div class="et_pb_text_2">
  <h3>Hello</h3>
</div>
<div class="et_pb_text_5">
  <h3>World</h3>
</div>

字体大小响应查询选择器

1 个答案: