CSS px의 단위는 무엇입니까?

CSS에서 px는 중국어로 "픽셀"을 의미하는 픽셀을 의미합니다. 이는 컴퓨터 시스템의 디지털 이미지 길이 단위로 화면 표시 해상도에 상대적입니다. 일반적인 컴퓨터 모니터의 해상도는 96DPI입니다. 이는 1픽셀이 1인치의 "1/96"임을 의미합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

px는 픽셀(pixel)의 약자로, 이미지 표시의 기본 단위입니다. 영어 "pixel"에서 번역된 것입니다. Pix는 영어 단어 "picture"의 일반적인 약어입니다. "픽셀"은 "그림 요소"를 의미하며, 때로는 pel(그림 요소)라고도 합니다.

px(픽셀, 픽셀): 컴퓨터 시스템의 디지털 이미지 길이 단위인 가상 길이 단위입니다. px를 물리적 길이로 변환하면 정밀 DPI(Dots Per Inch, Pixels Per Inch)가 됩니다. 스캔하고 인쇄할 때 지정해야 합니다. 일반적으로 DPI 옵션이 있습니다. Windows 시스템의 기본값은 96dpi이고 Apple 시스템의 기본값은 72dpi입니다.

CSS에서 px는 화면 디스플레이 해상도에 상대적인 상대적 길이 단위입니다.

• 동일한 장치에서 각 CSS 픽셀이 나타내는 물리적 픽셀은 변경될 수 있습니다(즉, CSS 픽셀의 상대성의 첫 번째 측면).

• 서로 다른 장치 간에는 각 CSS가 나타내는 물리적 픽셀이 픽셀은 변경될 수 있습니다(즉, CSS 픽셀의 상대성의 두 번째 측면).

다양한 장치에는 디스플레이의 물리적 픽셀로 간주될 수 있는 모니터의 포인트 피치와 같은 기본 이미지 단위가 다릅니다. 현재 LCD 모니터의 도트 피치는 일반적으로 0.25mm에서 0.29mm 사이입니다. 프린터의 잉크 도트도 프린터의 물리적 픽셀로 간주할 수 있습니다. 300DPI는 0.085mm이고 600DPI는 0.042mm입니다.

우리가 일반적으로 모니터 해상도라고 부르는 것은 실제로 모니터의 물리적 해상도가 아니라 데스크톱에서 설정한 해상도를 나타냅니다. 그러나 이제는 LCD 모니터가 주류가 되었습니다. LCD의 디스플레이 원리는 CRT의 디스플레이 원리와 다르기 때문에 데스크탑 해상도가 물리적 해상도와 일치할 때만 디스플레이 효과가 가장 좋습니다. 따라서 이제 데스크탑 해상도는 거의 항상 동일합니다. 모니터의 물리적 해상도는 동일합니다.

CSS 사양의 정의에 따르면 CSS의 px는 보기 장치의 해상도에 상대적인 상대적 길이입니다. 이 보기 장치는 일반적으로 컴퓨터 모니터입니다. 일반적인 컴퓨터 모니터의 해상도는 96DPI입니다. 즉, 1픽셀은 1/96인치입니다. (실제로 모니터 해상도가 물리적 해상도와 일치하고 액정 포인트 피치가 실제로 0.25mm에서 0.29mm 사이라고 가정하면, 따라서 정확히 1/96인치는 아니지만 거의 비슷합니다.

일반적으로 px는 해당 장치의 물리적 픽셀입니다. 그러나 출력 장치의 해상도가 컴퓨터 모니터와 크게 다를 경우 출력 효과에 문제가 발생합니다. 예를 들어, 종이에 출력되는 프린터의 해상도는 컴퓨터 화면의 해상도보다 훨씬 높습니다. 장치의 물리적 픽셀을 크기 조정 없이 직접 사용하면 600DPI 프린터로 인쇄되는 컴퓨터의 사진은 약 6배가 됩니다. 모니터로 볼 때보다 작아요.

따라서 CSS는 이 경우 일반적으로 일관된 읽기 환경을 유지하기 위해 브라우저가 픽셀 값의 크기를 조정하고 조정해야 한다고 규정합니다. 즉, 특정 픽셀의 길이는 항상 다른 장치 출력에서 ​​크기가 비슷하게 나타나야 합니다.

이를 보장하는 방법은 무엇입니까? 기기의 물리적 픽셀 크기에 따라 직접 변환하는 것도 물론 하나의 방법이지만 CSS에서는 "참조 픽셀"(참조 픽셀)에 따라 변환을 수행하는 것이 더 좋습니다.

눈으로 보는 크기는 보는 각도에 따라 달라집니다. 시야각은 물체의 실제 크기와 눈과의 거리에 따라 달라집니다. 10m 떨어진 곳에 있는 1m 정사각형의 물체는 1m 떨어져 있는 10cm 정사각형의 물체와 거의 같은 크기로 보입니다. 이는 나뭇잎을 통해 산을 볼 수 없다는 상식입니다.

따라서 CSS 사양은 보기 각도를 사용하여 "참조 픽셀"을 정의합니다. 96DPI(예: 1인치 96포인트)의 해상도로 장치의 출력을 볼 때 1 참조 픽셀은 1포인트(예: 1/96인치)입니다. 팔 길이의 관점에서.

이 차이점에 유의하세요. CSS 사양에서 정의한 참조 픽셀은 1/96인치가 아니라 팔 길이에서 1/96인치의 시야각입니다. 일반적으로 인간의 평균 팔 길이는 28인치로 알려져 있으므로 화각은 0.0213도로 계산됩니다. (i.e. (1/96)in / (28in * 2 * PI / 360deg) )

다른 장치 출력을 사용할 때 눈과 장치 출력 사이의 일반적인 거리가 다릅니다. 예를 들어, 컴퓨터 모니터는 일반적으로 팔 길이에 있지만 책과 종이를 읽을 때는(프린터의 장치 출력에 해당) 일반적으로 더 가깝습니다. 예를 들어, TV를 시청할 경우 일반적으로 TV 화면 대각선 길이의 2.5~3배가 권장됩니다. 42인치 컬러 TV의 경우 거의 3미터 정도 떨어져 있습니다. 영화를 보고 계시다면... 어디까지인지는 모르겠지만 직접 측정해보시면 됩니다.

따라서 1개의 참조 픽셀:

은 컴퓨터 모니터의 경우 0.26mm(예: 1/96인치)이고

는 레이저 프린터의 경우 0.20mm입니다(일반적인 판독 거리가 55cm, 즉 21인치라고 가정).

변환 시 300DPI 프린터(즉, 각 포인트는 1/300인치)의 경우 1픽셀은 일반적으로 3점(약 0.25mm)으로 반올림되고 600DPI 프린터의 경우 5점(0.21인치)으로 반올림될 수 있습니다. mm .

요약하자면, px는 상대적인 단위이며 항상 특정 장치의 대략적인 값입니다(원칙은 참조 픽셀에 최대한 가깝게 하는 것입니다).

그러나 절대 단위를 출력 효과에 대한 절대 제어로 이해하면 상황이 상당히 다릅니다. 웹 페이지 출력의 주요 대상인 컴퓨터 화면에 관한 한 px는 데스크톱 해상도와 일치하는 참조 단위로 간주될 수 있습니다. LCD 화면인 경우 거의 항상 물리적 해상도와 일치합니다. LCD 화면 - 즉, 웹디자이너가 설정한 1px는 "드디어 이 웹페이지를 보는 사용자의 모니터에 있는 1개의 점"이라고 합니다! 반대로, 그 절대 단위는 전혀 절대적인 것이 아닙니다.

cm나 pt 같은 절대 단위는 화면에 표시할 때 픽셀로 변환해야 하고, 이 변환은 픽셀의 실제 물리적 길이를 기반으로 하지 않기 때문입니다(브라우저가 알 필요도 없고 알 수도 없습니다) 현재 모니터) 1px의 물리적 길이는 얼마입니까? 그러나 데스크탑에서 설정한 DPI에 따라 계산됩니다. 즉, 웹디자이너는 특정 글꼴을 12pt(즉, 1/6인치 또는 4.2mm)로 지정합니다. 실제로 화면을 측정할 때 정확히 12pt가 되는 것은 거의 불가능하지만 12pt에 가까운 16px만 됩니다. 96DPI로 변환). 화면 피치가 0.29mm라면 실제로는 4.64mm, 즉 13.15pt입니다. 바탕 화면을 큰 글꼴(120DPI)로 변경하면 최종 12pt는 20px에 해당합니다. 도트 피치 0.29mm에 따르면 최종 효과는 16.44pt입니다.

과거에는 웹 디자이너가 px를 사용하지 않는 것이 권장되었습니다. 한 가지 이유는 사용자가 자신의 필요에 따라 데스크톱 DPI를 조정하여 절대 길이(혀 트위스터)의 실제 길이를 제어할 수 있다는 것입니다.

그러나 이는 사실 의심스럽습니다. 절대 길이의 실제 길이는 필요에 따라 조정할 수 있으므로 px와 같은 상대 길이를 필요에 따라 조정할 수 없을 이유가 없습니다. 사진이 실제로 인쇄될 때와 마찬가지로 필요에 따라 크기를 조정할 수 있습니다. px로 설정된 글꼴과 이미지는 실제로 표시될 때 크기가 조정될 수 있습니다. 그러면 웹 디자이너가 지정한 1px는 더 이상 사용자 데스크탑의 1px에 해당하지 않습니다. 대신 1.2px, 1.5px 또는 기타 값에 해당할 수 있습니다.

과거에는 브라우저에서 글꼴 크기를 조정하는 옵션이 절대 길이(브라우저 내부의 DPI 조정과 동일)에만 유효했고 px에는 유효하지 않았습니다. 이는 과거 브라우저의 디자인 문제라고 할 수 있습니다. , px 고유의 문제는 아닙니다. 이제 브라우저는 px 단위로 설정된 글꼴 크기 조정을 지원합니다. Firefox와 마찬가지로 사용자는 글꼴만 크기를 조정하거나 이미지 크기도 조정할 수 있습니다. 그러므로 모든 px의 "픽셀 수준의 정밀 디자인"을 사용하는 것이 완전히 가능하며, 합리적이라고 생각하는 디자인 방법이기도 합니다. 결국 CSS의 px는 일관된 읽기 경험을 보장하기 위한 것입니다. 유동 레이아웃인지 고정 레이아웃인지, 다양한 해상도에 적응할 수 있는지 여부는 또 다른 주제이며 px를 단위로 사용할지 여부와 직접적인 관련이 없습니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS px의 단위는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!