Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2021, 15:42
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 112

Обявление переменной в @media
Здравствуйте, етот код не пропорцыонально увеличивает размер текста ( тоесть текст увеличивается по высоте в 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>

Последний раз редактировалось fori, 07.05.2021 в 17:37.
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2021, 16:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,790

fori,
width: calc(10 * var(--superVmin, 100px)) ;
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2021, 18:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,790

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>
Ответить с цитированием
  #4 (permalink)  
Старый 08.05.2021, 23:46
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 112

Спасибо, получилось сделать так
<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему у меня не срабатывает @media в одном месте ? Texnarik Элементы интерфейса 6 27.02.2020 17:49
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 18:08
посылка переменной kent0026 jQuery 5 04.01.2014 15:34
Как значение переменной вставить в имя переменной? jsgogo Общие вопросы Javascript 3 02.06.2013 11:11
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 14:25