@lillianfisher

Как сделать динамический scale в зависимости от соотношения екрана?

Здравствуйте, для сохранения пропорцыональности елементов (резиновая верстка) я делаю все размеры в vmin (размеры шрифтов/квадратов и тд.) Однако мне нужно чтоб елементы уменшались в случае квадратных екранов (чтоб предотвратить налаживание) как можно ето сделать...
Пример кода
<div class="main">
    <div class="auth"></div>
    <div class="table" ></div>
    <div class="news" ></div>
</div>


<style>
.main {
  width: 100vw;
  height: 100vh;
  }
  
  .auth {
    width: 60vmin;
	height: 60vmin;
	background: blue;
	position: absolute;
	left: 2%;
	right : 2%;
  }
  .table {
      width: 60vmin;
	height: 20vmin;
	background: green;
    position: absolute;
    right: 2%;
    top: 2%;
  }
  .news {
        width: 70vmin;
	height: 20vmin;
	background: gold;
    position: absolute;
    right: 2.5%;
    bottom: 2.5%;
  }

</style>

Так он выглядит на 16:9
609406fd434a4300043355.jpeg
Так он выглядит на квадратном екране 60940715a4dc2673419466.jpeg
Пример решения похожей проблеммы но для размера шрифтов
@mixin fontSuperSize($number){
	@media (min-aspect-ratio: 2/1) {
			font-size: $number * 2vh;
	}
	@media (max-aspect-ratio: 2/1) {
			font-size: $number * 1vw;
	}	
}

Но задать scale к примеру transform: scale(2vw) я не могу...
В общем мне нужно чтоб елементы были длинными если позволяет длинна екрана, но не нарушали своих пропорцый. Как сделать аналог того миксина но для размеров елементов.... Как бы вы решали подобною проблемму...
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
@SergeyNavrotskiy
В bootstrap-vue есть компонент `b-aspect`, реализующий похожее поведение — можете подсмотреть у них )
https://bootstrap-vue.org/docs/components/aspect
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы