Размер шрифта CSS динамически между интервалами
При маленьком размере экрана (мобильный) размер шрифта фиксируется на 14px. На действительно больших экранах размер шрифта установлен на 18px. Таким образом, он никогда не может быть ниже 14px и никогда не может быть выше 18px. Об этом позаботятся медиа-запросы.
Затем у нас есть золотая середина, где я хочу, чтобы размер шрифта был динамическим между 14px и 18px. Для этого я использую font-size: calc(.5vw + .85em);, который работает нормально, но не очень хорошо. Я не знаю, как рассчитать, чтобы он начинался с 14px и заканчивался на 18px между шириной экрана 40rem (16 * 40) и 65rem.
Любые идеи?
.wrap {
font-size: 16px;
}
p {
font-size: calc(.5vw + .85em);
}
p:before {
content: 'Desktop: ';
opacity: .5;
}
@media screen and (min-width: 65rem) {
p {
font-size: 18px;
}
p:before {
content: 'Desktop large: ';
opacity: .5;
}
}
@media screen and (max-width: 40rem) {
p {
font-size: 14px;
}
p:before {
content: 'Mobile: ';
opacity: .5;
}
}<div class = "wrap">
<p>
text
</p>
</div>Я также добавил это сюда:https://jsfiddle.net/6ybkp7a1/6/
Пример
Когда я нахожусь на экране шириной 40.1rem (чуть выше 40rem), у меня должен быть размер шрифта, такой как 14.1px (или что-то еще), чуть выше 14px.
Ответы 2
Установите другой медиа-запрос для min-width: 40rem вместе с другими медиа-запросами, которые у вас есть. Это должно позаботиться о размере экрана между этими двумя размерами экрана, которые вы добавили.
Вот рабочий пример (JSFiddle):
.wrap {
font-size: 16px;
}
@media screen and (max-width: 40rem) {
p {
font-size: 14px;
}
p:before {
content: 'Mobile: ';
opacity: .5;
}
}
@media screen and (min-width: 40rem) {
p {
font-size: calc(.5vw + .85em);
}
p:before {
content: 'Desktop: ';
opacity: .5;
}
}
@media screen and (min-width: 65rem) {
p {
font-size: 18px;
}
p:before {
content: 'Desktop large: ';
opacity: .5;
}
}<div class = "wrap">
<p>text</p>
</div>Я думаю, это даст тот же результат, что и исходный код
Да. Хорошая попытка, но на самом деле проблема не решает. Например, когда я нахожусь на экране шириной 40.1rem, у меня должен быть размер шрифта чуть выше 14px, например 14.1px или что-то еще.
Вы можете попробовать это. Он будет постепенно переходить от 14px к 18px.
Как это работает?
100vw - это наш размер экрана, поэтому он будет отличаться от 40rem и 65rem в нужном регионе. За вычетом 40rem у нас будет вариация между 0rem и 25rem. 25rem невероятно похож на (16px * 25) = 400px. Наша вариация теперь от 0 до 400px, и если мы разделим на 100 и добавим 14px, мы получим вариацию между 14px и 18px.
.wrap {
font-size: 16px;
}
p {
font-size: calc(14px + (100vw - 40rem)/100); /*or 14px + 1vw - 0.4rem */
}
p:before {
content: 'Desktop: ';
opacity: .5;
}
@media screen and (min-width: 65rem) {
p {
font-size: 18px;
}
p:before {
content: 'Desktop large: ';
opacity: .5;
}
}
@media screen and (max-width: 40rem) {
p {
font-size: 14px;
}
p:before {
content: 'Mobile: ';
opacity: .5;
}
}<div class = "wrap">
<p>
text
</p>
</div>Вроде работает отлично! Спасибо! Я не совсем понимаю формулу, но, поскольку она основана на моих исходных числах, думаю, она должна работать во всех случаях. знак равно
@ JensTörnell Я добавил дополнительные пояснения к ответу;)