如何以现实生活中的单位（如厘米或毫米）设置尺寸？答案

【问题标题】：How to set a dimension in real life units, like cm or mm?如何以现实生活中的单位（如厘米或毫米）设置尺寸？
【发布时间】：2013-10-12 17:04:24
【问题描述】：

我正在尝试制作一个 img，获得一定的高度，以毫米为单位。

显然， CSS 规则 height: 10mm; 不这样做，它转换为 height:37.8px ，根据这个链接：http://css-tricks.com/the-lengths-of-css/

那么，无论访问者使用什么设备，我如何将高度设置为真实单位？

附言

如果这不能用纯 CSS 完成，jQuery 或任何其他解决方案都可以。

请告诉我一条路。

感谢您的帮助！

如果问题不清楚，我尝试的是：

响应式 CSS、媒体查询等不起作用。看到这个页面： http://webtasarimveprogramlama.com/cetvel/alternatif-1/

通过使用此页面的移动设备进行模拟： http://www.brickandmobile.com/mobile-emulator/

虽然它被标记为响应式设计，但我猜它类似于反响应式设计:)

【问题讨论】：

如果输出设备是投影仪，又无法判断投影到的屏幕有多远，你想怎么办？
好的，我把我的问题改成“.. in a screen” :)
我认为您可能希望做的最好的事情就是尝试获取设备的 DPI（每英寸点数。请参阅此问题：stackoverflow.com/questions/476815/…），然后进行数学运算（使用 javascript）找出多少像素最能代表该显示器上的一英寸，然后通过 javascript 设置 css 规则。如果你问我，这对于一个相当微不足道的改变来说是很多工作。更不用说它不会得到很好的支持。
这篇文章可能会让您感兴趣（尽管它不包含解决方案）：alistapart.com/column/…
@BlakeMann 这似乎是我正在寻找的。如果您能将其发布为我该怎么做的答案，我将不胜感激。谢谢！

【解决方案1】：

根据这个问题的答案：Pixel to MM equation?

您可以尝试通过获取具有 mm 大小的 div 的大小来计算 mm 到 px 或其他方式。

<div id="mm" style="height:1mm;display:none"></div>

然后

var pxPerMM = $('#mm').height();

希望对您有所帮助。

已编辑：

所以，我刚刚意识到您问的是如何分配毫米。如果您使用 jQuery，您可以使用 css() 函数来分配它。例子： https://jsfiddle.net/yusrilmaulidanraji/Lyzr2ju1/

$("#millimeter-size").css("height","50mm");
$("#millimeter-size").css("width","50mm");

#millimeter-size{
  border: 1px solid black;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="millimeter-size">

</div>

【讨论】：