使用 javascript 为 CSS 创建一个新的单位类型

Create a new unit type for CSS with javascript?

本文关键字：一个 类型 单位 javascript CSS 创建 使用      更新时间：2023-09-26
有点

奇怪的问题。 也许更多的是好奇。

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

由于我知道我将要打开的屏幕尺寸，我想为毫米添加"mm"。 这可能吗？ 我能找到的最接近的东西是cssHooks，但那将是很多钩子！

干杯！

CSS 已经有了这个单元（docs），所以你可以立即使用它。

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

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

您确实知道毫米和厘米在CSS中已经可用。

可用的 CSS 单元：

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

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

你用jQuery设置它们，如下所示：

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

小提琴

如果您的屏幕不是 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，但这并不相同。

相关文章：