1

有点奇怪的问题。或许更多的是好奇。

我希望能够向 CSS 添加新的单位类型。所以目前，我们有“px”、“%”、“em”之类的东西。

因为我知道我将要使用的屏幕尺寸，所以我想为毫米添加“mm”。这可能吗？我能找到的最接近的东西是 cssHooks，但那将是很多钩子！

干杯!

4

3 回答 3

5

CSS 已经有这个单元（文档），所以你可以马上使用它。

请注意，这可能不会在屏幕上给出以毫米为单位的确切尺寸。CSS 假定像素密度为 96dpi。

回答您的具体问题：不，不可能使用 JavaScript 创建新的 CSS 单元。但是，如果您知道屏幕的大小和您使用的分辨率（以像素为单位），您始终可以计算以像素为单位的等效值。例如，如果您在1024x768px屏幕上使用40x30cm，您可以假设cm( 10mm) 在 附近26px。

于 2012-08-18T21:19:09.937 回答
2

您确实知道 CSS 中已经提供了毫米和厘米。

可用的 CSS 单位：

  • em（ems，元素字体的高度）
  • ex( x-height , 字母 "x" 的高度)
  • px（像素，相对于画布分辨率）
  • in（英寸；1 英寸=2.54 厘米）
  • cm（厘米；1cm=10mm）
  • mm（毫米）
  • pt（点；1pt=1/72in）
  • pc(派卡斯; 1pc=12pt)

绝对单位通常仅用于其他介质类型，如打印等。

您可以像这样使用 jQuery 设置它们：

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

小提琴

于 2012-08-18T21:20:39.503 回答
1

如果您的屏幕不是96dpi，您可以使用支持变量的CSS 预处理器，例如SASS。这样，您可以定义一个从毫米到像素的变量：

$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 回答