Я работаю над веб-страницей на основе scss
и столкнулся с проблемой. У меня есть следующая функция scss
для преобразования единиц шрифта px
в rem
.
@function rem($size) {
$remSize: $size / $base-size;
@return #{$remSize}rem;
}
В приведенной выше функции $base-size
статичен и остается 16
, но я хочу изменить base-size
на 12
, когда я нацелен на мобильные устройства, чтобы уменьшить избыточность изменения font-size
на протяжении всего проекта. Могу ли я сделать $base-size
динамическим, чтобы значение менялось в зависимости от разрешения экрана. Любая помощь будет оценена по достоинству.
Насколько мне известно, это невозможно. Переменная $base-size
заполняется один раз, и медиа-запрос выполняется на стороне клиента.
Вы можете попробовать написать новую функцию для каждого медиа-запроса с новой переменной и значением базового размера.
Переменные:
$base-size: 16px;
$base-size-small: 12x;
Edit: For the same reason, the function below doesn't work.
Функции:
@function rem($size) {
$remSize: $size / $base-size;
@return #{$remSize}rem;
}
@media only screen and (max-width : 768px) {
@function rem($size) {
$remSize: $size / $base-size-small;
@return #{$remSize}rem;
}
}
Для этого, вероятно, есть много обходных путей, в зависимости от того, с какой сложностью вы готовы работать.
Не зная деталей вашего проекта, это может быть одно из решений - если я правильно понимаю, как вы используете свою функцию:
$base-size: 16px;
@function rem($size, $screen: desktop) {
$remSize: null;
@if ($screen == desktop) {
$remSize: ($size / $base-size) * 16/16;
}
@if ($screen == mobile) {
$remSize: ($size / $base-size) * 12/16;
}
@else {
$remSize: $size / $base-size;
}
@return #{$remSize}rem;
}
.some-text {
font-size: rem(24px); /* = 1.5rem */
}
@media (max-width: 480px) {
.some-text {
font-size: rem(24px, mobile); /* = 1.125rem */
}
}
Добавив аргумент $screen
к вашей функции rem()
, вы можете переключать базовый размер между настольным и мобильным компьютером без изменения статической переменной.
В этом примере по умолчанию используется desktop
и используется max-with
в медиа-запросе, но также может быть по умолчанию mobile
, и вы можете отличаться от min-width
.
Например, мой основной размер шрифта - 16px
, на основе которого другой размер шрифта работает с rem. Если я изменю базовый размер шрифта моего тела на 12, остальное изменит свое значение rem на его основе.
Я не могу найти это решение.
Потому что медиа-запрос работает на этапе выполнения. Sass работает на этапе компиляции.
Итак, я установил размер шрифта html на 62,5% (10 пикселей)
Затем использовал rem немного легко.
html {
font-size: 62.5%; // 10px;
}
@media screen and (min-width: 769px) {
html {
font-size: 125%; // 20px;
}
}
.example {
padding: 0.5rem; // 5px => 10px
}
Чтобы быть более конкретным, я не хочу, чтобы в моей функции передавался какой-либо дополнительный аргумент, вместо этого моя функция должна быть умной, чтобы возвращать базовый размер на основе экрана мультимедиа.