웹 브라우저의 픽셀 및 뷰포트
물리적 픽셀
화면에 있는 픽셀 포인트(물리적 픽셀 단위는 이미지에서 더 이상 분할할 수 없음)
논리 픽셀 (css의 px 픽셀)
css에서 px 단위가 표시하는 픽셀은 1px가 반드시 하나의 물리적 픽셀과 같지 않으며 서로 다른 장치의 환산은 다를 수 있습니다
장치 1px가 두 개의 물리 픽셀과 같으면 50px
* 50px의 그림은 실제 물리적 픽셀이 100이어야 한다*100은 10000의 물리적 픽셀로 구성되어 있는데 이 값보다 작으면 시각적으로 그림이 흐릿해 보인다.장치 픽셀 비율
1px에 대응하는 물리 픽셀 개수를 장치 픽셀비라고 한다
뷰포트
배치 뷰포트(layout viewport)
window.innerHeight 및 window.innerWidth로 구성된 영역은 일반적으로 배치 뷰포트로 간주됩니다.비주얼 뷰포트(visual viewport)
비주얼 뷰포트는 현재 브라우저에서 표시되는 부분을 나타냅니다.
너비와 높이의 미디어 조회는 배치 뷰포트, 즉 주 문서(document)의 창(window 대상)을 기준으로 합니다.
CSS에는 뷰포트 크기에 따른 길이 단위도 있습니다.1vh 단위는 1% 배치 뷰포트의 높이이며, vw 단위는 이와 유사합니다.
iframe 문서의 너비 기반 미디어 조회는 iframe의 뷰포트 너비로 참조되며 전체 브라우저의 뷰포트가 아닙니다
SVG가 미디어 조회를 할 때 참조의 높이와 너비는 전체 브라우저 뷰포트가 아닌 SVG를 감싸고 있는 컨테이너에 따라 달라집니다.
장치 뷰포트 이동하기
pc 브라우저의 해상도는 일반적으로 모바일 기기의 해상도보다 크다. 페이지가 모두 모바일 기기에서 전시될 수 있도록 모바일 기기의 뷰포트 폭은 보통 980px이고 렌더링할 때 페이지를 축소한다.예를 들어 너비 320px의 모바일 장치에 980px의 페이지를 표시하면 모바일 브라우저는 이 페이지를 완전히 보여줄 때까지 축소할 것이다.배율을 조정하면 글꼴이 작아집니다.
이동단 브라우저는 화면 너비로 기본 980px 뷰포트 너비를 대체할 수 있습니다. 이 경우 320px 너비의 이동 장치는 320px 페이지만 표시할 수 있습니다.
뷰포트 너비를 화면 너비로 설정하려면:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
