CSS VW и VH - коэффициент поддержки

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

Но когда пользователь меняет высоту окна - я не могу заставить его отвечать одинаково - потому что 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>

источник

2016-10-10 user3706091

Что вы имеете в виду, «VW и VH не играют вместе»? Соотношение сторон всегда одно и то же !? – Fantasterei

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

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

я в конечном итоге делаем некоторые 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>

источник

2016-10-11 07:44:25 user3274489

Взгляните на эту новую скрипку: 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 ; 
    } 
}

источник

2016-10-11 19:21:45 Davey

CSS VW и VH - коэффициент поддержки

ответ

Смежные вопросы