Как получить соотношение сторон в HTML и CSS?

Отзывчивый веб-сайт зависит от запросов @media, которые принимают значение с точки зрения пикселей или типа экрана.

Есть ли способ установить медиа-запрос, используя соотношение сторон используемого экрана? Как?

Также как получить или рассчитать соотношение сторон текущего экрана, на котором отображается веб-страница, из HTML и CSS?

Добро пожаловать в Stack Overflow! Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. В том виде, в котором он сейчас написан, трудно точно сказать, о чем вы спрашиваете.

— 19.03.2022 14:04

html css media-queries

19.03.2022 13:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

К сожалению, в CSS нет такой вещи, как sw или sh, чтобы получить ширину/высоту экрана.
JS в помощь!

Используйте JS ширина экрана и экран.высота
Использовать свойство CSS соотношение сторон
Рассчитать соотношение сторон: ш/ш : 1

const set_AR = (el) => el.style.aspectRatio = screen.width / screen.height;

set_AR(document.querySelector("#emulator"));

#emulator {
  --scale: 0.6;
  max-width: calc(100vw * var(--scale));
  max-height: calc(100vh * var(--scale));
  background: #000;
}

<div id = "emulator"></div>

19.03.2022 14:20

Другие вопросы по теме

Условно переопределить стиль AntD Select в CSS

Текст не помещается в изображение на Bootstrap

Почему div растягивается правильно, а не изображение?

Как я могу добавить стиль к элементу в javascript?

Как заставить тумблер использовать boostrap 5?

Редактировать кнопку веб-страницы с помощью CSS

Реализуйте дочерний элемент div с полосами прокрутки, чтобы отображать большой контент, сохраняя при этом родительский элемент и другие элементы одного уровня

Сделайте так, чтобы столбцы всегда были в одной строке

Возникли проблемы с переносом текста для выравнивания с изображением, используя только flex

Стили CSS-сетки

Как получить соотношение сторон в HTML и CSS?

Ответы 1

Другие вопросы по теме

Похожие вопросы