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

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

вопрос

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

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

TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
Сегодня, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:17

фтп обычный юзер а не root
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:15

дэк только так и загружаю
Gordi | Как реализовать шифрование трафика? ³

Gordi
Как реализовать шифрование трафика?
18-11-2024, 14:14

я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:13

Gordi,
через фтп загружай
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:11

Привет Николай!
Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
или направь на путь истинный, пжст