Get The Screen Width & Height Without JavaScript
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
Javascriptを使わずCSSだけでスクリーンサイズを取得する方法です。 @propertyと三角関数を使用します。
@property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>'; inherits: true; initial-value: 100vh; } :root { --w: tan(atan2(var(--_w),1px)); /* screen width */ --h: tan(atan2(var(--_h),1px)); /* screen height*/ /* The result is an integer without unit */ }
たったこれだけ!
取得したwidthとheightはvar(--w)
やvar(--h)
とCSS Variablesで使用できます。