屏幕上的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.55釐米）。
• cm釐米。
• mm毫米。
• pt分（1分= 1/72英寸）。
• pc Picas（1 pica = 12分）。

如果你想使用釐米，但想要一英寸，請使用style="width: 2.54cm; height: 2.54cm;"，因爲1 inch = 2.54cm。

Answer 2

這是不可能的。你只能得到一些近似值。將寬度和高度設置爲1in是最好的選擇，但它不是一個特別好的鏡頭，因爲您可以看到是否測量尺寸（在不同的設備上）。作爲CSS3單元模塊describes，所謂的絕對單位可以錨定到物理單位或像素。像1in = 96px這樣的固定關係暗示着（除非偶然）CSS in不是真正的物理英寸或CSS px不是真正的物理像素。

在紙上，你可能會預期物理單位是錨單位，所以in真的是英寸。但即使這種期望經常失敗。