css - 屏幕上的 CSS 1x1 英寸框

Question

我怎样才能将一个盒子指定为 1x1 英寸。这应该打印为 1x1 英寸的盒子，在屏幕上将被视为 1x1 英寸的盒子。

Answer 1

JSFiddle：http: //jsfiddle.net/eR9CS/

英寸：

<div style="background-color: red; width: 1in; height: 1in;"></div>​

厘米：

<div style="background-color: red; width: 1cm; height: 1cm;"></div>​

相对长度单位

• em计算的字体大小。
• ex小写“x”的高度。
• px像素，相对于查看设备。
• %百分比。
• rem根元素的字体大小。
• vw视口宽度。
• vh视口高度。
• vm视口宽度或高度的较小值。
• ch零宽度（渲染字体中零字形的宽度）。

绝对长度单位

• in英寸（1 英寸 = 2.54 厘米）。
• cm厘米。
• mm毫米。
• pt点（1 点 = 1/72 英寸）。
• pc皮卡斯（1 皮卡 = 12 分）。

如果您想在任何地方使用厘米但想要一英寸，请使用style="width: 2.54cm; height: 2.54cm;"since 1 inch = 2.54cm。

Answer 2

这是不可能的。你只能得到一些近似值。将宽度和高度设置为1in是您的最佳拍摄，但这不是一个特别好的拍摄，因为您可以看到您是否测量尺寸（在不同的设备上）。正如 CSS3 单位模块所描述的，所谓的绝对单位可以锚定到物理单位或像素。1in像= then这样的固定关系96px意味着（除了意外）CSSin不是真正的物理英寸或 CSSpx不是真正的物理像素。

在纸面上，你可以期望一个物理单位是锚单位，所以这in实际上是英寸。但即使是这种期望也经常失败。