화면의 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).
• cm 센티미터.
• mm 밀리미터.
• pt 포인트 (1 포인트 = 1/72 인치).
• pc 피카 (1 피카 = 12 점).

어디서나 1 인치를 사용하려는 경우 1 inch = 2.54cm부터 style="width: 2.54cm; height: 2.54cm;"을 사용하십시오.

Answer 2

이것은 불가능합니다. 근사치 만 얻을 수 있습니다. 너비와 높이를 1in으로 설정하는 것이 가장 좋은 방법이지만 다른 장치에서 크기를 측정하면 알 수 있듯이 특히 좋은 결과는 아닙니다. CSS3 단위 모듈 describes처럼, 소위 절대 단위는 물리적 단위 나 픽셀에 고정 될 수 있습니다. 1in = 96px과 같은 고정 관계는 (우연한 경우를 제외하고) CSS in은 실제 물리적 인 인치 또는 CSS가 아님을 의미합니다. px은 실제 실제 픽셀이 아닙니다.

종이에 물리적 단위가 앵커 단위가 될 것으로 예상 할 수 있으므로 in이 실제로 인치가됩니다. 그러나 이러한 기대조차 종종 실패합니다.