Responsive website depends on @media queries which takes value in terms of pixels or screen type.

Is there a way to set media query using aspect ratio of the screen that is being used? How?

Also how to fetch or calculate the aspect ratio of the current screen on which the web page is being displayed from HTML and CSS?

CodePudding user response：

Sadly there's no such thing in CSS like sw or sh to get the screen width / height.
JS to the rescue!

• Use JS's screen.width and screen.height
• Use CSS aspect-ratio property
• Calculate the aspect-ratio: sw/sh : 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>