CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直

[coliss]

CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできます。

[sgo2]

CSSはネイティブで計算されるのでjsより高速

[rdlf]

「三角関数なんて何の役に立つんだよ」でよく盛り上がるけどCSSも三角関数が使えるのか。

[yarumato]

“tan(atan2())を使用して、スクリーンサイズやフォントサイズを数値で取得取得するテクニックを紹介。atan2は現在ブラウザで不具合が多く回避方法は。三角関数を知っている必要はない”

[daira4000]

バッドノウハウあじがするけど便利は便利か…

[ajakan]

仕事で三角関数出てきたの2回目。1回目はマカロンタワーの高さから必要なマカロンの数を計算したかったとき。

[pmint]

vwとpxを混ぜると誤りになるのはバグらしい。そのバグが無くなったら、このハックもいらないな。小泉構文やトートロジーみたいなネタ。なんでpxが基準なんだろ。数学を全部りんごとみかんの個数で計算するようなもの。

[Phenomenon]

jsは重いからcssでできるならcssでやりたい派

[siriusarc7]

CSSで何ができて何ができないかを把握しておくのが面倒なのでjsでできるならそうしちゃうんだよなぁ