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

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

вопрос

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

Как правильно сделать адаптацию размера шрифта таким образом, чтобы он не вылазил за пределы экрана (использую тег 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

Nimax | Создание простого сайта отзывов (рейтинг ... ⁵

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
25-04-2024, 17:18

Странный вы, это как минимум в ваших интересах т.к модули с рейтингами для комментариев есть и в паблике, поэтому и хочется посмотреть как это реализовано у вас. Стоимость то не низкая для модуля
New-dev.ru | Создание простого сайта отзывов (рейтинг ... ⁵

New-dev.ru
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
24-04-2024, 14:14

А что там на фронте на скрине или демо смотреть? Там в стандартную форму добавления комментария просто добавляется рейтинг, например, звездный.
TeraMoune | Сделать модуль опросы ³

TeraMoune
Сделать модуль опросы
22-04-2024, 13:32

Конечно. Пишите в телеграм.
Nimax | Сделать модуль опросы ³

Nimax
Сделать модуль опросы
22-04-2024, 13:17

Да в том и дело =) так и думал можете сделать? сколько будет по стоимости?
TeraMoune | Сделать модуль опросы ³

TeraMoune
Сделать модуль опросы
22-04-2024, 12:56

Зачем же для этого модуль ? Есть стандартные опросы, достаточно добавить одну правку на обработку тега в описании новости от стандартного тега poll.
Nimax | Создание простого сайта отзывов (рейтинг ... ⁵

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
22-04-2024, 12:14

А есть скрины или демо как это на фронте выглядит?
New-dev.ru | Создание простого сайта отзывов (рейтинг ... ⁵

New-dev.ru
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
21-04-2024, 18:25

Эта старая публикация, за несколько месяцев цена выросла, а тут забыл исправить цену, сожалею. Сейчас поставил актуальную цену.
Nimax | Создание простого сайта отзывов (рейтинг ... ⁵

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
21-04-2024, 13:18

Как преобрести за 9$? на сайте цена другая
Jigurda | Как в description вставить значение доп. ... ²

Jigurda
Как в description вставить значение доп.поля?
19-04-2024, 10:54

Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
lutskboy | Как в description вставить значение доп. ... ²

lutskboy
Как в description вставить значение доп.поля?
18-04-2024, 21:51

https://sandev.pro/web/159-fullstory-metatags-by-sander.html