Как называется данная адаптация?

Question

[Дмитрий Щербаков]

Ребята, помогите мне пожалуйста, передо мной встала задача осуществить адаптацию, при которой при изменении ширины экрана, маштабируется абсолютно всё, картинки, текст, все блоки.
Картинки то понятно просто ширину задавая в процентах, а как сделать например так, чтобы размер текста также уменьшался, без медиа запросов...
Подскажите пожалуйста)

Comments

[iBird Rose]

Здесь достаточно подробно дали ответ про font-size Как изменять размер шрифта в зависимости от размера экрана?

Answer 1

[Эмиль Рахматуллин]

Указывай размеры не в px, а в rem (как в Bootstrap) или em. Ширина колонок должна быть в %.

А называется это responsive дизайн :)

Comments

[Otrivin]

Стоит упомянуть, что rem устанавливает размер шрифта относительно html, а em - относительно родителя.
И все равно уменьшать размер шрифта в зависимости от ширины придется через медиа-запросы.
Ну, или без них, но через js :)

Answer 2

[ljutaev]

привет ))
ребята дело говорят, но смотреть нужно в сторону vh, vw
https://css-tricks.com/viewport-sized-typography/

Comments

[AlikDex]

рано еще пользоваться этими приблудами. на куче телефонов эти размеры не работают нифига.

[ljutaev]

AlikDex, ну не знаю, я использовал на некоторых сайтах)

[ljutaev]

ljutaev, caniuse поддержка норм

Answer 3

[alexalexes]

font-size тоже проценты принимает, но вы ужаснетесь, как он будет тупо все масштабировать.
Вам все-равно придется корректировать частные случаи медиазапросами.

Answer 4

[Vasyl Vandych]

Как показывает практика, что у заказчика всегда будет какойто такой девайс который с твоими выставленными % будет выглядеть криво.
Чисто жесткие меда запросы к расширению экрана, иначе никак.