レスポンシブコーディングのときpxを%に変換する機会が多くなりませんか?
たとへば2カラムのWEBデザインでpxから双方の幅(width)の比率(%)を計算したいといったことはよくあると思います。
そこで今回、pxから%に変換するための比率計算ツールを作成しました。
数値を入れるだけで簡単に%の値を得ることができます。
ぜひお役立てください。
pxから%へ比率計算ツール
計算結果
0%
【親要素と子要素のビジュアル比較】
親要素[100% (1000px)]
子要素[0% (0px)]
使い方
ラフデザインをもとにコーディングすることを想定しています。
親要素、子要素(%へ変換したい要素)それぞれのpxを入力すると、計算結果に結果が出る仕組みになってます。
計算結果は実際コピペで使うことを考えて、小数点第2位までの切り捨てで表示されるようになっています。
【親要素と子要素のビジュアル比較】は見た目の目安に設置しております。
※pxの数値も同時に記載されますが、実際の大きさとは異なります。
※pxの数値も同時に記載されますが、実際の大きさとは異なります。