2025年01月21日(火)

CSSのみで画面の幅と高さのウィンドウサイズを取得する方法

• 0
• 0
• 0
• 0

画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。

CSSカスタムプロパティ「@property」と「:root」を使ってウィンドウサイズの幅と高さを取得

まず、元ネタは以下です。

Get the screen width & height without JavaScript

CSSでウィンドウサイズの幅と高さを判別するには、CSSのカスタムプロパティ機能「@property」を使って「:root」の変数に入れる際に三角関数を使って取得します。

[css]
@property –_w {
syntax: ‘‘;
inherits: true;
initial-value: 100vw;
}

@property –_h {
syntax: ‘‘;
inherits: true;
initial-value: 100vh;
}

:root {
–w: tan(atan2(var(–_w),1px));
–h: tan(atan2(var(–_h),1px));<...