이것은 모바일 웹에 대한 모든 기사에서 언급되었지만,이 속성이 정확히 무엇을 측정하는지에 대한 설명을 찾을 수 없습니다.
누구 든지이 검사와 같은 쿼리가 무엇인지 자세히 설명해 주시겠습니까?
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}답변:
장치 픽셀 비율은 실제 픽셀과 논리 픽셀 간의 비율입니다. 예를 들어, 물리적 선형 해상도가 논리적 선형 해상도의 두 배이기 때문에 iPhone 4 및 iPhone 4S는 2의 장치 픽셀 비율을보고합니다.
공식은 다음과 같습니다.
어디:
는 IS 물리적 선형 해상도는
과:
논리적 선형 분해능
다른 장치는 정수가 아닌 것을 포함하여 다른 장치 픽셀 비율을보고합니다. 예를 들어 Nokia Lumia 1020은 1.6667, Samsumg Galaxy S4는 3, Apple iPhone 6 Plus는 2.46 (출처 : dpilove )을보고 합니다. 그러나 특정 장치를 위해 설계해서는 안되므로 원칙적으로 아무것도 변경되지 않습니다.
CSS "픽셀"은 "일부 화면에서 하나의 그림 요소"로 정의되는 것이 아니라 팔 길이에서 약 1 인치 인 시야각의 비선형 각도 측정 으로 정의 됩니다
. 출처 : CSS 절대 길이
이는 고화질 이미지 리소스를 준비하고 다른 이미지를 다른 장치 픽셀 비율로 신중하게 적용하는 것과 같이 웹 디자인에 많은 영향을 미칩니다. 로우 엔드 장치가 고해상도 이미지를 강제로 다운로드하지 않고 로컬로 다운 스케일링하기를 원할 것입니다. 또한 고급형 장치가 흐릿한 사용자 경험을 위해 저해상도 이미지를 업 스케일하지 않기를 바랍니다.
비트 맵 이미지가 붙어있는 경우 여러 장치 픽셀 비율을 수용하려면 CSS 미디어 쿼리 를 사용 하여 장치 그룹마다 다른 리소스 집합을 제공 해야 합니다. 이것을 좋은 트릭과 결합 background-size: cover하거나 명시 적 background-size으로 백분율 값 으로 설정하십시오 .
#element { background-image: url('lores.png'); }
@media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
@media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}이런 식으로 각 장치 유형은 올바른 이미지 리소스 만로드합니다. 또한 pxCSS 의 단위는 항상 논리 픽셀에서 작동합니다 .
점점 더 많은 장치 유형이 나타날수록 모든 장치에 적절한 비트 맵 리소스를 제공하는 것이 더 까다로워집니다. CSS에서 미디어 쿼리는 현재 유일한 방법이며 HTML5에서는 picture 요소 를 사용하여 다른 미디어 쿼리에 대해 서로 다른 소스를 사용할 수 있지만 대부분의 웹 개발자는 여전히 IE11을 더 오랫동안 지원해야하기 때문에 여전히 100 %가 아닙니다 ( 출처 : caniuse ) .
사진이 아닌 아이콘, 라인 아트 및 디자인 요소에 대한 선명한 이미지가 필요한 경우 SVG에 대해 생각해야합니다. SVG는 모든 해상도로 아름답게 확장됩니다.
background-image와 결합 할 수 있습니다 . w3.org/TR/2002/WD-css3-background-20020802/#background-size-webkit-background-size:50%
background-size디스플레이를 최적으로 사용하기위한 트릭을 사용해야 합니다.
웹 개발의 세계에서 장치 픽셀 비율 (CSS 픽셀 비율이라고도 함)은 CSS가 장치의 화면 해상도를 해석하는 방법을 결정합니다.
브라우저의 CSS는 다음 공식으로 장치의 논리적 (또는 해석 된) 해상도를 계산합니다.
예를 들면 다음과 같습니다.
애플 아이폰 6s
웹 페이지를 볼 때 CSS는 장치에 375x667 해상도 화면 이 있다고 생각 하고 미디어 쿼리는 화면이 375x667 인 것처럼 응답 합니다. 그러나 화면에 렌더링 된 요소는 실제 화면에 두 배의 물리적 픽셀이 있기 때문에 실제 375x667 화면보다 두 배 더 선명합니다.
다른 예 :
삼성 갤럭시 S4
아이폰 5s
CSS 픽셀 비율이 만들어진 이유는 휴대 전화 화면의 해상도가 높아짐에 따라 모든 기기의 CSS 픽셀 비율이 여전히 1 인 경우 웹 페이지가 너무 작아 렌더링되지 않기 때문입니다.
일반적인 전체 화면 데스크톱 모니터는 1920x1080 해상도에서 약 24 인치입니다. 모니터가 약 5 인치로 줄었지만 해상도가 같은 경우를 상상해보십시오. 화면에서 사물을 보는 것은 너무 작아서 불가능합니다. 그러나 현재 제조업체는 1920x1080 해상도의 전화 화면을 지속적으로 제공하고 있습니다.
따라서 휴대폰 제조업체는 장치 픽셀 비율을 발명하여 화면의 요소를 너무 작게 보거나 읽지 않고도 휴대폰 화면의 해상도, 선명도 및 품질을 계속해서 높일 수있었습니다.
다음은 현재 장치의 픽셀 밀도를 알려주는 도구입니다.
width: 100%는 디스플레이의 전체 너비가됩니다. 늘어나지 않습니다. 화면은 300 픽셀로 표시됩니다. 논리 / CSS 해상도에 따라 이미지가 표시됩니다. 이제 귀하의 예에서 600px 이미지를 대신 제공 할 수도 있습니다. 논리적 300px 디스플레이의 전체 너비이지만 디스플레이가 기본 600px이므로 이미지는 원래 300px 이미지보다 두 배 선명하게 보입니다. 더 큰 이미지이지만 디스플레이에 모든 추가 픽셀이 있으므로 더 좋아 보입니다. 이것이 "Retina Displays"의 아이디어입니다.
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
CSS 픽셀 당 장치 픽셀 수를 제공합니다.
이것은 거의 자기 설명입니다. 숫자는 하나의 "가상"픽셀 (CSS에서 설정된 크기)을 표시하는 데 사용되는 "실제"픽셀 (화면의 물리적 픽셀)의 비율을 나타냅니다.
Boris Smus의 가변 픽셀 밀도에 대한 높은 DPI 이미지 는 장치 픽셀 비율을보다 정확하게 정의합니다. CSS 픽셀 당 장치 픽셀 수는 근사치이지만 전체 스토리는 아닙니다.
로 장치에서 사용하는 DPR을 얻을 수 있습니다 window.devicePixelRatio.
width=device-width전체 화면으로 확장됩니까?