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

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

вопрос

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

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

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

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

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

Юзер

494

irrwisch - 2016-03-0823 апреля 2017 16:03 - #63341

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

Юзер

aleps - 2016-03-0823 апреля 2017 16:23 - #63342

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

Юзер

252

dimavdv - 2016-03-0823 апреля 2017 16:26 - #63343

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

Юзер

aleps - 2016-03-0823 апреля 2017 16:50 - #63344

как простой вариант. написал сейчас, не знаю на сколько это правильно

$(window).resize(function(){
if ( $('.filmFull').width() > 1200 ) { 
    $('.filmFull').css('font-size','14px'); 
} else { 
    $('.filmFull').css('font-size','17px'); 
}
});

Юзер

252

dimavdv - 2016-03-0823 апреля 2017 17:04 - #63347

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

Юзер

494

irrwisch - 2016-03-0823 апреля 2017 17:55 - #63349

тогда используйте @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;
	}
}

Юзер

252

dimavdv - 2016-03-0823 апреля 2017 18:41 - #63351

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

Юзер

494

irrwisch - 2016-03-0823 апреля 2017 19:20 - #63352

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

Юзер

aleps - 2016-03-0823 апреля 2017 19:40 - #63354

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

Юзер

453

ravchik - 2016-03-0824 апреля 2017 14:39 - #63359

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

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?