Как изменить переменную scss на основе медиа-запросов

Я работаю над веб-страницей на основе scss и столкнулся с проблемой. У меня есть следующая функция scss для преобразования единиц шрифта px в rem.

@function rem($size) {
 $remSize: $size / $base-size;
 @return #{$remSize}rem;
}

В приведенной выше функции $base-size статичен и остается 16, но я хочу изменить base-size на 12, когда я нацелен на мобильные устройства, чтобы уменьшить избыточность изменения font-size на протяжении всего проекта. Могу ли я сделать $base-size динамическим, чтобы значение менялось в зависимости от разрешения экрана. Любая помощь будет оценена по достоинству.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
2 642
3

Ответы 3

Насколько мне известно, это невозможно. Переменная $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.

Чтобы быть более конкретным, я не хочу, чтобы в моей функции передавался какой-либо дополнительный аргумент, вместо этого моя функция должна быть умной, чтобы возвращать базовый размер на основе экрана мультимедиа.

Benjamin 09.11.2018 09:26

Например, мой основной размер шрифта - 16px, на основе которого другой размер шрифта работает с rem. Если я изменю базовый размер шрифта моего тела на 12, остальное изменит свое значение rem на его основе.

Benjamin 09.11.2018 09:29

Я не могу найти это решение.

Потому что медиа-запрос работает на этапе выполнения. 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  
}

Другие вопросы по теме