1

ちょっと変わった質問です。好奇心の方が大きいのかもしれません。

CSS に新しいユニット タイプを追加できるようにしたいと考えています。現時点では、「px」、「%」、「em」などがあります。

表示される画面のサイズはわかっているので、ミリメートルに「mm」を追加したいと思います。これは可能ですか？私が見つけることができる最も近いものは cssHooks ですが、それはフックがたくさんあります!

乾杯！

4

3 に答える 3

5

CSSにはすでにこのユニット（docs）があるので、すぐに使えます。

これは、おそらく画面上のミリメートル単位の正確な寸法を示していないことに注意してください。CSS は、96 dpi のピクセル密度を想定しています。

特定の質問への回答:いいえ、JavaScript で新しい CSS ユニットを作成することはできません。ただし、画面のサイズと使用している解像度 (ピクセル単位) がわかっている場合は、常に同等のピクセルを計算できます。たとえば1024x768px、 の画面で を使用している場合、 ( ) が の周りに40x30cmあると想定できます。cm10mm26px

于 2012-08-18T21:19:09.937 に答える
2

mm と cm はすでに CSS で使用できることをご存知でしょう。

利用可能な CSS ユニット:

  • em( ems、要素のフォントの高さ)
  • ex( x-height、文字「x」の高さ)
  • px(ピクセル、キャンバスの解像度に相対的)
  • in(インチ; 1in=2.54cm)
  • cm(センチ; 1 センチメートル = 10 ミリメートル)
  • mm(ミリ)
  • pt(ポイント; 1pt=1/72インチ)
  • pc(パイカ; 1pc=12pt)

絶対単位は通常、印刷などの他のメディア タイプにのみ使用されます。

次のように jQuery で設定します。

$(element).css('height', '50mm');

フィドル

于 2012-08-18T21:20:39.503 に答える
1

画面が96dpiでない場合は、 SASSなどの変数をサポートするCSSプリプロセッサを使用できます。このようにして、ミリメートルからピクセルまでスケーリングする変数を定義できます。

$mm = 2.83 // for 72dpi (72/25.4≈2.83)

.content
    width: 150px*$mm

しかし、それはあまりエレガントではありません。すべてのスタイルシートを前処理する必要があり、構文（npx * $mm）は扱いにくいです。

画面のDPIが可変の場合は、メディアクエリを使用して画面サイズに応答してみてください。$mm画面サイズに基づいて定義できると思います。残念ながら、私が知る限り、現在DPIに基づいてターゲットを設定することはできません。Webkitベースのモバイルブラウザはをサポートしています-webkit-device-pixel-ratioが、それは同じではありません。

于 2012-08-18T21:42:02.867 に答える