CSSの三角関数tan(atan2())でスクリーンサイズやフォントサイズを取得する

CSSでスクリーンサイズを取得

全てのブラウザで期待通りに動作するためには、最初に###pxとして100vwが必要になります。これはCSSでは簡単なことで、カスタムプロパティに設定し、–100vw: 100vwのような値にすれば自動的に行われます。

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --100vh {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

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

div {
  height: calc(var(--px-height) * 1px);
  width: calc(var(--px-width) * 1px);
  background: lime
}
div::before {
  counter-reset: w var(--px-width) h var(--px-height);
  content: "w: " counter(w) " h: " counter(h);
}

–px-widthはスクリーンの幅で、通常は整数です。
幅だけでなく、100vhで高さも取得できます。

CSSでフォントサイズとかも取得

同じアイデアで、コンテナのクエリ単位、混合単位を含むサイズ計算、remのpxサイズなどに使用できます。長さを登録し、その値を設定し、tan(atan2())で数値をpxに変換するだけです。

@property --length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

div { font-size: calc(1px + 2rem); }

div::after {
  --length: 1em;
  counter-reset: val calc(
    tan(atan2(var(--length), 1px))
  );
  content: counter(val);
  /* safari bug filed, requires calc() wrapper */
}
inserted by FC2 system