CSSでのpx・%・em・vhなど異なる単位の対応値が確認できるWEBサービス「CSS unit conversion using a NPM package」

CSSでのpx・%・em・vhなど異なる単位の対応値が確認できるWEBサービス「CSS unit conversion using a NPM package」

CSSでのpx・%・em・vhなど異なる単位の対応値が確認できるWEBサービス「CSS unit conversion using a NPM package」

CSS unit conversion using a NPM packageは、pxや%、emなどのCSSでの異なる単位の対応値を確認することができるWEBサービスです。

各単位の対応表が掲載されているサイトはありますが、CSS unit conversion using a NPM packageでは動的に値を変化させながら確認することができます。

CSS unit conversion using a NPM packageの使い方

CSS unit conversion using a NPM packageにアクセスして、各種単位のバーをドラッグして値を変化させるだけです。それぞれに対応した値が表示されます。

CSS unit conversion using a NPM packageの使い方

基準となる横幅と高さは、ブラウザのウインドウサイズになりますので、横幅と高さを変更したい場合はウインドウサイズを調整します。

あとがき

サクッと単位毎の値を確認したい時に便利だし、vhやvwにも対応しているのはありがたいです。

値が%やemで指定されていると、親要素の値によって変動することもあってわかりにくいですよね。計算するのが面倒な時はぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です