CSS VW и VH - поддерживать соотношение

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть страница, содержащая DIV, которая поддерживает соотношение сторон. У меня есть некоторый текст в div, который использует VW для размера шрифта, который сохраняет размер текста при изменении ширины страницы — и это здорово.

Но когда пользователь изменяет высоту окна — я не могу заставить его реагировать одинаково — потому что VW и VH не играют вместе.

Есть ли какая-нибудь хитрость CSS или Javascript, чтобы заставить это работать? В идеале на лету, если пользователь изменяет размер браузера, находясь на сайте?

Вот указанная проблема:

https://jsfiddle.net/Lp8jynfr/1/

 <style>
.page-wrapper{
    width: 100vw; 
    height: 68.60vw; /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh;
    max-width: 145.7vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
    border: 5px solid #000;
}

.text{
    position: absolute;
    width:100%;
    top:36%;
    left:0;
    right:0;
    font-size: 5.6vw;
    color:#2d90db;
    text-align:center;
}
</style>

<div class="page-wrapper">
  <div class="text">
  This is some text I want resized
  </div>
</div>

1. Что вы имеете в виду, говоря «VW и VH не играют вместе»? Соотношение сторон всегда одинаковое !?

2. Вы можете попробовать использовать CSS calc для вычисления правильных размеров. например width: calc(100vw / 1.6) , или width: calc(100vw / 3vh) .

3. вы должны сделать это в двух отдельных случаях: в одном, где высота является ограничивающим фактором, а в другом, где ширина является ограничивающим фактором. обновите класс на основе этого, используя обработчик изменения размера ( api.jquery.com/resize поскольку вы используете jQuery). Размер шрифта будет пропорционален vw в одном случае и vh в другом.

4. Взгляните на vmin или vmax, если вам нужно свойство, которое будет зависеть от наименьшей или наибольшей стороны окна просмотра соответственно.

5.Вот обновление вашей скрипки, используя предложенный vmin Дэйви: jsfiddle.net/Lp8jynfr/2

Ответ №1:

Взгляните на эту новую скрипку: https://jsfiddle.net/davey182673/Lp8jynfr/4 / Он использует следующий медиа-запрос для определения соотношения сторон видового экрана.

 ...
.text {
    font-size: 5.625vw;
}

/* at the point when the media query is applied */
/* 5.625vw = 10vh */
@media (min-aspect-ratio: 16/9) {
  .text {
    font-size: 10vh ;
  }
}

Ответ №2:

В итоге я выполнил несколько Jquery, чтобы заставить это работать, это работает довольно гладко

Я добавил атрибут в DIV, чтобы указать Jquery размер шрифта, затем выполнил некоторые вычисления по высоте родительского контейнера, чтобы он масштабировался в зависимости от высоты DIV

 $(window).on("resize", function () {

    $('.resize').height(function(){
        $height = $(this).parent().parent().height();
        $datasize = $(this).attr("data-size");
        $fontsize = $height/100  * $datasize "px"
        $(this).css("font-size",$fontsize);
    });

}).resize();

<div class='resize' data-size="9">Some text I want to resize</div>