Обявление переменной в @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,
width: calc(10 * var(--superVmin, 100px)) ; |
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>
|
Спасибо, получилось сделать так
<!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>
|
| Часовой пояс GMT +3, время: 02:12. |