Установка размера шрифта в зависимости от высоты контейнера flexbox - PullRequest
Новая
       15

Установка размера шрифта в зависимости от высоты контейнера flexbox

0 голосов
/ 19 мая 2018

Мне интересно, возможно ли установить размер шрифта, используя высоту элементов flexbox.У меня есть контейнер flexbox с использованием единиц просмотра, а высота элементов определяется свойством flex-grow.Что я ищу, так это устанавливаю размер шрифта на высоту этих элементов и сохраняю эти отношения при изменении области просмотра.

У меня есть базовая идея, которая несколько работает, но я не совсем уверен, как выделить только букву (от базовой линии до высоты крышки) и масштабировать ее до контейнера элемента.

https://codepen.io/NewbCake/pen/JvwNJq (изменить размер окна по вертикали, чтобы установить размер шрифта)

Я открыт для любых предложений о том, как подойти к этой или любым подводным камням, с которыми это может столкнуться.

HTML 

<section class="center">
  <div class="container">
    <div class="item1">H</div>
    <div class="item2">H</div>
  </div>
</section>

CSS 

section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.container_wide {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

.item2 {
  flex-grow:3;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

JS 

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
    $(".item1").css("font-size", $(".item1").css("height"));
    $(".item2").css("font-size", $(".item2").css("height"));            
  }, 250);
});

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 19 мая 2018

Если у вас есть контроль над flex-grow, вы можете сделать некоторые вычисления, чтобы получить font-size в зависимости от высоты контейнера.Так что если у вас есть 1 + 2 как flex-grow, это означает, что второй будет вдвое больше первого, поэтому мы можем определить H высоту как H+2*H = height of container = 80vh, так что H = calc(80vh / 3).

первый элемент будет иметь font-size:H, а второй - font-size:2*H.

Вы можете также рассмотреть переменную CSS, чтобы лучше справиться с этим. 

body {
   margin:0;
  padding:0;
  font-family: sans-serif;
}

header {
  display:flex;
  height:5vh;
}
section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  --h:80vh;
  height:var(--h);
  width:var(--h);
  border:1px solid blue;
}

.gauge {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:10vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  font-size:calc((var(--h) / 3));
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:1;
}

.item2 {
  font-size:calc((var(--h) / 3) * 2);
  flex-grow:2;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:1;
}
<header class="center">resize window vertically</header>
<section class="center">
  <div class="gauge">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
  <div class="container">
    <div class="item1">Haj</div>
    <div class="item2">Hlp</div>
  </div>
</section>
...