設定
長さ800px / 目盛り間隔10px / 横向き
出力
横向きのピクセル定規とウィンドウ・DPR情報
デザインツール
ピクセル定規 - 画面サイズと目盛り表示
ページ上に horizontal または vertical の pixel ruler を描画できます。長さや tick 間隔を調整し、window size と device pixel ratio を見ながら layout や mockup 上の CSS pixel を確認できます。
PixelsRulerMeasure
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
ピクセル定規
屏幕信息
窗口宽度-
窗口高度-
设备像素比-
屏幕分辨率-
利用シーン
- design mockup と実画面の pixel 間隔を照合する
- 現在の window size と DPR を確認する
- horizontal / vertical ruler を切り替えて layout の基準にする
使い方
- ruler の長さと tick 間隔を設定する
- 向きと theme を選ぶ
- 検出された screen 情報を確認する
入出力サンプル
FAQ
この ruler はどの pixel を基準にしていますか？
描画は CSS pixel 基準で行い、同時に device pixel ratio も表示して、layout pixel と physical pixel を区別できるようにしています。
どの程度の長さを指定できますか？
長さはおおむね 100〜2000px に対応し、tick 間隔は 5、10、20、50px から選べます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS 単位変換
CSS 単位変換 - px、rem、em、vw
px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。
CSS 単位 変換
アスペクト比計算機
アスペクト比と比例サイズ計算機
ブラウザでアスペクト比を計算してロックしてください。幅と高さから比率を導き出すか、片側を変えてもう片側は比例したままにします。一般的なプリセットやトリミング、動画フレーム、レスポンシブレイアウトのプレビューが含まれています。
比率 サイズ 設計
CSS Clamp ジェネレーター
CSS Clamp ジェネレーター - 流体的レスポンシブサイズ
最小・最大 viewport 幅と目標サイズ範囲から、font size、spacing、そのほか length を viewport に応じて伸縮させる clamp() 式を計算できます。
CSS clamp Responsive