如何获取 HTML 和 CSS 内的纵横比？

Question

响应式网站取决于@media 查询，它根据像素或屏幕类型获取价值。

有没有办法使用正在使用的屏幕的纵横比来设置媒体查询？怎么样？

还有如何从 HTML 和 CSS 中获取或计算显示网页的当前屏幕的纵横比？

Answer 1

遗憾的是 CSS 中没有像 sw 或 sh 这样的东西来获取屏幕宽度/高度。
JS 来拯救！

• 使用JS的screen.width and screen.height
• 使用CSSaspect-ratio属性
• 计算 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>