Форум

fori · #1 (**permalink**) 07.05.2021, 15:42

Здравствуйте, етот код не пропорцыонально увеличивает размер текста ( тоесть текст увеличивается по высоте в 2 раза быстрее чем по длинне)

<div>1234567890987654321</div>

<style>
@media (min-aspect-ratio: 2 / 1) {
      div {
        font-size: 8vh; } }
    @media (max-aspect-ratio: 2 / 1) {
      div {
        font-size: 4vw; } }
<style>

достигается ето таким миксином

/*
@mixin fontSuperSize($number){
    @media (min-aspect-ratio: 2/1) {
            font-size: $number * 2vh;
    }
    @media (max-aspect-ratio: 2/1) {
            font-size: $number * 1vw;
    }   
}*/

Но мне нужно также увеличиваать и размеры div, можно ли менять значение переменной (тоесть сделать свою интерпретацыю vmin, которая будет возращать минимальное значение из 2vh и 1vw)

Благодаря "рони", уже рабочий код

<div></div>
<style>
@media (min-aspect-ratio: 2 / 1) {
      div {
        --superVmin: 2vh; } }
    @media (max-aspect-ratio: 2 / 1) {
      div {
       --superVmin: 1vw; } }
div{
height: 100vh;
width: calc(10 * var(--superVmin, 100px)) ;
background: green;
}
</style>

рони · #2 (**permalink**) 07.05.2021, 16:24

fori,

width: calc(10 * var(--superVmin, 100px)) ;

рони · #3 (**permalink**) 07.05.2021, 18:15

fori,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
@media (min-aspect-ratio: 2 / 1) { div {--superVmin: 2vh;  --color: #FF00FF} }
div{
width: calc(10 * var(--superVmin, 1vw)) ;
background-color: var(--color, green);
height: 5px;
}
p{
width: 10vw ;
background: green;
height: 5px;
}
p.h{
width: 20vh ;
background-color: #FF00FF;
height: 5px;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<p class="h">p.h</p>

</body>
</html>

fori · #4 (**permalink**) 08.05.2021, 23:46

Спасибо, получилось сделать так

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div></div>
</body>
<style>

@media (min-aspect-ratio: 2/1) {
  div {
    --superVmin: 2vh;
  }
}
@media (max-aspect-ratio: 2/1) {
  div {
    --superVmin: 1vw;
  }
}

div {
  width: calc(10 * var(--superVmin));
  height: calc(10 * var(--superVmin));
  background: red;
}

</style>

</html>

Но почему scss-миксин не компилируется к примеру

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div></div>
</body>
<style lang="scss">
@mixin superVar($var, $number, $vh, $vw) {
  @media (min-aspect-ratio: 2/1) {
    $var: $number * $vh;
  }
  @media (max-aspect-ratio: 2/1) {
    $var: $number * $vw;
  }
}

div {
  @include superVar(--superVmin, 1, 2vh, 1vw);
  width: calc(10 * var(--superVmin));
  height: calc(10 * var(--superVmin));
  background: red;
}
/*
//компилируется только в 

div {
  width: calc(10 * var(--superVmin));
  height: 10vmin;
  background: red;
}
//а миксин игнорируется
*/
<style>
</html>

Форум

Справочник

Discord чат

Курсы javascript