查询选择器上的字体大小响应

Question

我已经通读了其他问题并尝试让我的文本在某个断点之后变得响应。但是当我保存它时它不会缩放它只需要我的 font-size: 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.Whenever 屏幕尺寸等于或大于 1024px 时，字体大小将仅为视口宽度的 4%，它将保持为 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>

查询选择器上的字体大小响应

Font-size responsive on query-selector

font-size

jquery-selectors