CSS, поддержка UltraHD — Vladimir Rodichev на DTF

Некоторые люди спрашивали меня в чем разница нативной верстки от обычной. Показываю конкретный пример!

Все сайты почти построены с фиксированными единицами (например в px пикселях), и ограничены контейнером по максимальной ширине. Такой сайт на больших экранах как минимум будет утопать в высоких разрешениях.Чтобы решить эту проблему вы можете строить сайт в специальных единицах, например vw.Чтобы не писать точки разрыва для адаптива вы можете использовать следующий код как пример:

width: max(var(--200px), min(200px));

где var(--200px) = конкретному значению vw с расчетом вычисления от какой-нибудь конкретной точки ширина экрана.

В качестве примера для сравнения приведу ниже код:

<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> <style> :root { --1440-16px: 1.1111111111111vw; --1440-90px: 6.25vw; } #d1 { background-color: blue; max-width: 90px; width: 100%; aspect-ratio: 2; color: white; font-size: 16px; } #d2 { background-color: green; max-width: max(var(--1440-90px), min(90px)); width: 100%; aspect-ratio: 2; color: white; font-size: max(var(--1440-16px), min(16px)); } </style> </head> <body> <div id="d0"> <div id="d1">Обычный блок</div> <div id="d2">Нативный блок</div> </div> </body> </html>

Чтобы сравнить откройте окно вначале в 1440px, разницу смотрите выше 1440px.

Чтобы вы не копировали код, специально для вас загрузил страничку:

gameraider.ru

https://gameraider.ru/native/love.html

Более продвинутые примеры с грязным кодом для типографии что-то делал давно:

gameraider.ru

https://gameraider.ru/native/polotnoALLINONE.html

gameraider.ru

https://gameraider.ru/native/polotnoALLINONE-2.html

Возможно для кого-то будет открытием.

Пользуйтесь!