Home / Questions / 31722
Accepted
Pavlo B.
Asked: 2020-11-05 01:36:37 +0800 CST 2020-11-05 01:36:37 +0800 CST

Масштабируемый размер шрифта (отзывчивый?)

  • 772

Есть ли способ сделать автомасштабирование размера шрифта в зависимости от размера экрана?

Я пытался ввести rem в %, но у меня это не работает.

html

4 Answers

  1. Best Answer

    В дополнение к тому, что прокомментировал товарищ Error404, я скажу вам две вещи.

    Вы можете контролировать размер шрифта в зависимости от ширины экрана:

    .mifuente {
    font-size: 2vw;
}

    Или вы можете сделать это с высотой:

    .mifuente {
    font-size: 2vh;
}

    В более конкретных случаях у вас нет альтернативы использовать в @mediaзависимости от вашего роста и ширины, чтобы делать то или иное.

    @media (max-width: 200px) and (max-heigth: 160px) {
    .mifuente {
        font-size: 20px;
    }
}
    • 15

  2. Вы можете использовать vw(view port) единицы измерения.

    font-size: 3.5vw;

    Они будут принимать пропорцию, основанную на ширине вашего экрана.

    С другой стороны, есть также vhте, которые принимают пропорцию, взяв за основу высоту.

    Наконец, вы можете использовать медиа-запросы. Если вы не хотите, чтобы он делал такие большие скачки (в зависимости от вашего экрана, он будет устанавливать его на те или иные размеры), вы можете напрямую указать в пикселях, какой размер шрифта вы хотите, чтобы шрифт имел для определенной ширины. экран.

    Пример:

    @media (max-width:700px) and (min-width:500px) {
    .texto{
       font-size: 12px;
    }
}

    В приведенном выше примере будет установлен шрифт размером 12 пикселей, когда размер экрана составляет минимум 500 пикселей и максимум 700 пикселей. Вы можете настроить его в соответствии с вашими потребностями, и вы можете использовать столько, сколько хотите.

    • 6

  3. Я вижу, что они не упомянули об этом в других ответах, и это то, что максимальный / минимальный предел обычно требуется при использовании единиц измерения vwи vh, принимая во внимание, что уже есть экраны с шириной в несколько тысяч пикселей, а другие очень маленькие, все это при условии, что это не гибкий дизайн или прогрессивное улучшение .

    Хотя пары медиа-запросов было бы достаточно, чтобы установить минимальное и максимальное значения, мы также можем использовать их calc()для установки минимального значения и добавления единиц vwo vhпо мере увеличения разрешения:

    font-size: calc(1rem + 1vw);

    В этом примере минимальный размер будет 1rem, и к нему будет добавлен 1% от текущего значения ширины области просмотра.

    Для верхней границы мы можем использовать «обычный» медиа-запрос:

    @media (min-width: 200rem) {
  p {
    font-size: 3rem;
  }
}

    На всякий случай можно использовать любую другую единицу измерения, кроме бэр.

    • 5

  4. Вы можете попробовать поставить их, emхотя это будет зависеть от источника, который есть на экране, если, например:

    Базовый шрифт: 8px.

    1 em = 8px, 2 em = 16px и так далее.

    Затем у вас есть возможность вставить его pt, но говорят, что это плохая идея, то, что она делает pt, зависит от размера экрана клиента. шрифт

    То, что советуют сегодня, хорошая практика - делать все в, emтак как это наиболее удобно и стандартно.

    Другой вариант - поместить кнопку с точки зрения доступности, что она делает, это увеличивает размер шрифта с помощью кнопки js, что она делает, это увеличивает базовый размер на процент, и поэтому то, что вы делаете с `em', увеличить размер, потому что все они относятся к базовому размеру шрифта, установленному в шаблоне.

    *{
 font-size: 8px;
}

    Например, он обычно устанавливается так, он обычно также принимает этот размер.

    Примечание . Обычно вы ставите *сигнал, что хотите, чтобы все было такого размера, но затем индивидуально вы можете настроить его.

    • -1