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

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

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

8
задан 04.11.2016, 11:36
4 ответа

Как extensiГіn в то, что прокомментировало compaГ±ero Error404 комментировать тебе две вещи.

ты Можешь контролировать tamaГ±o шрифта с шириной твоего экрана:

.mifuente {
    font-size: 2vw;
}

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

.mifuente {
    font-size: 2vh;
}

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

@media (max-width: 200px) and (max-heigth: 160px) {
    .mifuente {
        font-size: 20px;
    }
}
13
ответ дан 24.11.2019, 12:44
  • 1
    S и # 237; раньше имей и # 237; в спешку и это я не смог писать лучше. Как только я вернулся я попробовал давать explicaci и # 243; n немного м и # 225; s пространная. Очень хороший ответ:) – Francisco Romero 04.11.2016, 12:08
  • 2
    Спасибо брат помог достаточно – SoftMolina 20.06.2019, 17:33
  • 3
    Я радуюсь bro! ;) – Daniel Díaz 20.06.2019, 18:10

Ты можешь использовать vw (view port) units.

font-size: 3.5vw;

Эти возьмут пропорцию в зависимости от ширины твоего экрана.

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

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

Пример:

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

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

6
ответ дан 24.11.2019, 12:44
  • 1
    Он делает " saltos" tama и # 241; или слишком большие... какая-то другая форма есть? – Pavlo B. 04.11.2016, 11:50
  • 2
    Я использовал средство vh, хотя не, если он правилен таким образом... Но кажется, что оно функционирует. – Pavlo B. 04.11.2016, 11:53
  • 3
    @PavloB. Я издал мой ответ. Раньше имей меня и # 237; к которому идти и я поместил что-то r и # 225; я прошу. Сейчас надеялся оставить это немного м и # 225; s просвет. – Francisco Romero 04.11.2016, 12:01

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

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

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

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

Для верхнего предела мы можем использовать средний показатель query "нормальная":

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

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

5
ответ дан 24.11.2019, 12:44

Ты можешь тестировать помещать их в em хотя он будет зависеть от шрифта, у которого будет экран, если например:

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

1 em = 8px, 2 em = 16px и так остается прогресс.

Потом у тебя есть выбор это поместить в pt , но комментируют, что это плохая идея, что он делает pt он состоит в том, чтобы зависеть от размера экрана клиента. шрифт

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

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

*{
 font-size: 8px;
}

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

Заметь: Имеют обыкновение он помещает *ты указываешь на то, что ты хочешь, чтобы у всего был этот размер, но потом индивидуально можешь настраивать это.

-1
ответ дан 24.11.2019, 12:44
  • 1
    Ты можешь настраивать это индивидуально, потому что est и # 225; внизу в порядке css, или потому что ты использовал селектор более конкретный, чем *, который является слишком много геном и # 233; богатый (он значит любой элемент). Также возможно использовать туз и # 237; .midiv * { – Daniel Díaz 04.11.2016, 11:59

Теги

Похожие вопросы