Адаптивная страница со слайдером на всю ширину экрана и модальным окном для видео с использованием HTML, CSS и 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 */ } Статья Демо
Html+css: выравнивание блока по центру
В этой статье Практики HTML, мы познакомимся с тремя техниками центрирования блока Margin+width Этот фокус позволяет центрировать блок заранее определённой ширины, независимо от ширины экрана. Кроме того, если использовать max-width вместо width, то, даже если размер экрана пользователя окажется меньше ширины этого блока, то блок не выйдет за границы экрана, а будет равен ширине экрана. Это весьма распространенная практика. Техника проста: margin: 0 auto;
max-width: 500px; и ваш блок (именно блочный элемент, а не строчный) окажется ровно в центре страницы...