Адаптивная страница со слайдером на всю ширину экрана и модальным окном для видео с использованием HTML, CSS и JavaScript
Как передать размеры экрана пользователя на сайт
Иногда при создании сайтов веб-программисты сталкиваются с вопросом: как передать на сервер размеры экрана пользователя? Действительно, бывают ситуации, когда это необходимо, например, если на сайте имеется несколько вариантов какого либо файла и содержимое каждого зависит от размеров экрана. Но это только один пример, на самом деле ситуации могут быть самые разные и иногда желательно иметь данные параметры уже при создании кода страницы на сервере, а не обрабатывать её при помощи JavaScript уже после загрузки...
Можно ли получить ширину и высоту экрана в CSS, не используя JavaScript? Вы можете получить ширину и высоту экрана в виде значений в пикселях, используя несколько строк CSS. - Создано на основе @property и тригонометрических функций. - Можно легко использовать в любой формуле. - Обновляется при изменении размера экрана (нет необходимости в JavaScript) @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>'; inherits: true; initial-value: 100vh; } :root { --w: tan(atan2(var(--_w),1px)); /* screen width */ --h: tan(atan2(var(--_h),1px)); /* screen height*/ /* The result is an integer without unit */ } Статья Демо