Размер шрифта реагирует на запрос-селектор - PullRequest
Новая
       10

Размер шрифта реагирует на запрос-селектор

0 голосов
/ 14 ноября 2018

Я прочитал другие вопросы и попытался заставить мой текст реагировать после определенной точки останова. Но когда я сохраняю, он не масштабируется, он просто берет мой размер шрифта: 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;
   }
}

1 Ответ

0 голосов
/ 17 ноября 2018

Можете ли вы объяснить, с какой проблемой вы столкнулись, или поделиться своим html?Я создал HTML для него, и он прекрасно работает.

Ниже 1024px экранов, размер шрифта будет 4vw.Это означает, что размер шрифта будет составлять всего 4 процента от ширины области просмотра всякий раз, когда размер экрана ниже 1024px. Когда размер экрана равен или превышает 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>
...