calc

ブラウザ幅と、高さの取得

<div class="test">test</div>

:root {
  --browser-w: 100vw;
  --browser-h: 100vh;
  --px-width: calc(tan(atan2(var(--browser-w), 1px)));
  --px-height: calc(tan(atan2(var(--browser-h), 1px)));
  /* calc() wrapper required for Safari, bug:
  // https://bugs.webkit.org/show_bug.cgi?id=263000
  */
}

@property --browser-w {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --browser-h {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

div.test {
  height: calc(var(--px-height) * 1px);
  width: calc(var(--px-width) * 1px)!important;
  background: lime;
  display:inline-block;
}
div.test:before {
  counter-reset: w var(--px-width) h var(--px-height);
  content: "w: " counter(w) " h: " counter(h);
}