Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как сделать адаптивный размер шрифта?

Как сделать адаптивный размер шрифта?


     23.04.2017    адаптивность, шрифт    Стили (CSS), jQuery    369

вопрос
Здравствуйте!
Помогите, пожалуйста, решить вопрос с адаптацией размера шрифта раз и навсегда.

Как правильно сделать адаптацию размера шрифта таким образом, чтобы он не вылазил за пределы экрана (использую тег pre)?

Текст должен адаптироваться на ширину блока в котором находится и не больше. А если он и так влазит, то оставить 14px.

Ответа пока нет


10 комментариев

irrwisch
Юзер

irrwisch - 23 апреля 2017 16:03 -

используйте для тега pre https://webref.ru/css/overflow

aleps
Юзер

aleps - 23 апреля 2017 16:23 -

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

dimavdv
Юзер

dimavdv - 23 апреля 2017 16:26 -

aleps, Вы все правильно сказали! Именно это мне и нужно.
Но каким образом сделать не знаю(

aleps
Юзер

aleps - 23 апреля 2017 16:50 -

как простой вариант. написал сейчас, не знаю на сколько это правильно
$(window).resize(function(){
if ( $('.filmFull').width() > 1200 ) { 
    $('.filmFull').css('font-size','14px'); 
} else { 
    $('.filmFull').css('font-size','17px'); 
}
});

dimavdv
Юзер

dimavdv - 23 апреля 2017 17:04 -

Это не то. Не увидел адаптивности.

irrwisch
Юзер

irrwisch - 23 апреля 2017 17:55 -

тогда используйте @media screen and, пример

@media screen and (max-width: 699px) and (min-width: 520px) {
	pre {
		width: 500px;
		font-size: 10px;
	}
}

@media screen and (max-width: 879px) and (min-width: 700px){
	pre {
		width: 680px;
		font-size: 11px;
	}
}

dimavdv
Юзер

dimavdv - 23 апреля 2017 18:41 -

Это у меня сейчас стоит. Мне же надо адаптивность под ширину. Чтобы шрифт автоматически выбрал размер для ширины блока.

irrwisch
Юзер

irrwisch - 23 апреля 2017 19:20 -

а по другому никак, добавляйте к блоку pre значение overflow-y: auto; и если у вас текст не вмещается в блок, то он не будет вылазить за пределы блока, а будет появляться горизонтальная прокрутка.

aleps
Юзер

aleps - 23 апреля 2017 19:40 -

как не увидел? первый класс .filmFul это класс блока , замени на свой. а 1200 на свою ширину
остальные filmFull это где меняем размер.

ravchik
Юзер

ravchik - 24 апреля 2017 14:39 -

используйте единицу измерения vw для шрифтов: 1vw = 1/100 от ширины окна браузера. т.е. при ширине окна 1200px, 1vw = 12px

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх