CSS에서 px는 무엇을 의미합니까?

CSS에서 px의 전체 이름은 픽셀입니다. 이는 중국어로 "픽셀"을 의미합니다. 이는 CSS 스타일 코드에 사용되는 논리적 픽셀을 나타내며 모니터 화면 해상도에 상대적입니다.

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

px 픽셀(CSS 픽셀)

px은 픽셀(Pixel)의 약자로, 픽셀 단위이자 이미지 표시의 기본 단위입니다. CSS에서 px는 화면 디스플레이 해상도에 상대적인 길이 단위입니다.

CSS 픽셀:

가상 픽셀, 장치 독립적 픽셀 또는 논리 픽셀이라고도 알려져 있으며 직관적 픽셀로도 이해될 수 있습니다. CSS 픽셀은 CSS 스타일 코드에 사용되는 논리적 픽셀을 나타내는 웹 프로그래밍 개념입니다. 예를 들어 iPhone 6의 CSS 픽셀 수는 375 x 667px입니다.

가상 픽셀은 CSS와 JS에서 사용하는 추상 단위인 "직관적인" 픽셀로 이해될 수 있습니다. 브라우저의 모든 길이는 CSS 픽셀이며 CSS 픽셀의 단위는 px입니다.

CSS 사양에서 길이 단위는 절대 단위와 상대 단위의 두 가지 범주로 나눌 수 있습니다. Px는 장치 픽셀을 기준으로 한 상대적 단위입니다.

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

px는 실제로 이미지 표시의 기본 단위인 픽셀의 약어입니다. 이는 명확한 물리량도 아니고 점이나 작은 사각형도 아닌 추상적인 개념입니다. . 따라서 픽셀에 대해 이야기할 때는 해당 맥락을 이해해야 합니다! 문맥을 꼭 이해하세요! 문맥을 꼭 이해하세요!

CSS 픽셀의 상대성을 이해하기 위한 예를 들어보세요.

이때 브라우저의 너비가 800px이고 너비가 400px인 블록 수준 요소 컨테이너가 있다고 가정합니다. 페이지. 이 시점에서 블록 컨테이너가 페이지의 절반을 차지해야 한다는 것은 명백합니다.

하지만 페이지를 확대하면("Ctrl 키"와 "+ 키"를 통해) 확대/축소 비율은 200%로 원래 크기의 두 배입니다. 이때 블록 컨테이너는 전체 브라우저를 가로로 차지합니다.

역설적인 점은 이때 브라우저 창의 크기를 조정하지도 않았고 블록 요소의 CSS 너비를 변경하지도 않았지만 두 배 더 크게 보인다는 것입니다. 이는 CSS 픽셀을 원본보다 두 배 확대했기 때문입니다.

CSS 픽셀이 화면 픽셀과 1:1 크기인 경우:

CSS 픽셀(검은색 테두리)이 늘어나기 시작합니다. 이때 1 CSS 픽셀은 1 화면 픽셀보다 큽니다

즉, 기본값은 이 경우 하나의 CSS 픽셀이 하나의 실제 픽셀 너비와 같아야 하지만 브라우저의 확대 작업으로 인해 하나의 CSS 픽셀이 두 장치 픽셀의 너비와 동일해집니다. 나중에 더 복잡한 상황을 보게 될 것입니다. 높은 PPI 장치에서 CSS 픽셀은 기본적으로 여러 실제 픽셀의 크기와 동일합니다.

위의 예에서 볼 수 있듯이 CSS 픽셀은 항상 상대적인 값일 뿐입니다.

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

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