CSS가있는 dp (밀도 독립 픽셀) 단위는 무엇입니까?

Android의 경우 사람들은 UI 요소에 dp (밀도 독립 픽셀) 측정을 사용하도록 권장 48dp하며 버튼 높이 등에 사용하는 것과 같은 규칙이 있습니다 .

저는 웹 애플리케이션을 작업하고 있는데 UI 디자인이 Android 디자인 표준을 따르지 않는다는 비판을 많이 받고 있습니다. 분명히 내 응용 프로그램은 Android Holo 테마 대신 CSS 및 HTML을 사용하기 때문에 다르게 보일 것입니다.하지만 여전히 가능한 한 많이 준수하도록 만들고 싶습니다. 그러나 CSS는 밀도 독립 측정을 허용하지 않습니다.

다른 해상도와 픽셀 밀도에서 내 응용 프로그램을 테스트 할 때보기가 좋지 않고 때로는 비율이 떨어져서 작동하지 않습니다. CSS에는 Android 네이티브 개발과 같은 dp 단위가 없지만 몇 가지 대안이 무엇인지 궁금합니다.

어떻게 든 Javascript를 사용하여 픽셀 밀도를 얻고 모든 것을 적절하게 수동으로 조정할 수 있습니까? 모든 해상도 / 밀도에서 멋지게 보이고 작동하는 웹 앱을 만드는 가장 좋은 방법은 무엇입니까?

http://www.w3.org/TR/css3-values/#lengths

CSS에서 사용 가능한 가장 가까운 단위는 뷰포트 백분율 단위입니다.

• vw-초기 컨테 이닝 블록 너비의 1 %와 같습니다.
• vh-초기 컨테 이닝 블록 높이의 1 %와 같습니다.
• vmin-vw 또는 vh 중 작은 값과 같습니다.
• vmax-vw 또는 vh 중 큰 값과 같습니다.

이러한 장치를 지원하지 않는 유일한 모바일 브라우저는 Opera입니다. http://caniuse.com/#feat=viewport-units

현재 받아 들여진 답변에 동의하지 않습니다. uber5001에서 알 수 있듯이 a px는 고정 된 단위이며 Android-specifc의 노력과 유사한 정신 dp입니다.

당 재료의 사양 :

CSS를 작성할 때 dp 또는 sp가 명시된 모든 곳에 px를 사용하십시오. Dp는 Android 용 개발에만 사용하면됩니다.

추가로

웹용으로 디자인 할 때 dp를 px (픽셀 용)로 바꿉니다.

사용 rem.

루트 요소의 글꼴 크기이며 다른 UI 요소의 크기에 매우 적합한 기본 단위입니다.

동일한 절대 크기 (센티미터)를 사용하면 텍스트 및 기타 요소가 모바일에서 너무 크거나 데스크톱에서 너무 작습니다.

동일한 양의 픽셀을 사용하면 텍스트 및 기타 요소가 모바일에서 너무 작거나 데스크톱에서 너무 큽니다.

rem그것이 말하는 때문에 유닛이 자리에있다 "이봐,이 일반 텍스트가 어떻게해야 큽니다." 여기에 다른 UI 요소의 크기를 기반으로하는 것은 매우 합리적인 선택입니다.

CSS3에서는 웹에 Android의 px. CSS3의 사양px 은 다음과 같습니다.

픽셀; 1px는 1in의 1/96과 같습니다.

px 나중에 원하는 측정이 될 수 있습니다.

CSS3에서 진정한 장치 독립적 인 CSS 단위는 없습니다. 절대 길이에 대한 W3C 사양을 참조하십시오 . 특히 절대 단위는 물리적 측정과 일치하지 않을 수 있습니다.

물리적 단위가 목적에 맞다면 포인트와 같은 것을 사용할 수 있습니다. 포인트는 dps에 충분히 가깝습니다.

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

SCSS를 사용하는 경우 pts로 반환하는 함수를 작성할 수 있습니다.

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

그리고 그것을 사용하십시오 :

.shadow-2 {
  height: dp(2);
}

rem 단위를 기반으로 한 인터페이스는 어떻습니까?

확인해야 할 문제에 대한 경험이 충분하지 않지만 뷰포트 크기를 기반으로 몇 가지 수학을 만들어 루트 요소에 글꼴 크기를 적용하면 전체 인터페이스가 그에 따라 조정될 것이라고 생각합니다. 이 물건은 나에게 아직 약간의 요술입니다.

포인트를 사용하지 않는 이유는 여러 장치에서 일관된 크기입니다. 그리고 화면 크기에 상대적입니다. 대부분은 전통적인 출판에서 비롯 되었기 때문에 익숙하지 않습니다.

vw (모든 장치의 화면 너비)와 em을 혼합하여 사용하는 것은 어떻습니까? 여기서 글꼴 크기는 장치 화면 너비에 따라 동적으로 변경됩니다. 기본 CSS 파일에서 다음 규칙을 사용하십시오.

font-size: calc(100vw * 10 / 375);

(iPhone 6/7/8의 너비는 375px, 320px (iPhone5) 등으로 변경)

모든 경우에 완벽하게 작동합니다. 마이너스가 하나뿐입니다. 목표가 "픽셀 퍼펙트"라면 점 뒤에 큰 숫자를 사용해야합니다.

예 : 목표는 모든 화면에서 글꼴 크기 h5 : 18px입니다.

그러면 당신의 완벽한 "그들"은 :

h5 { 
 font-size: 1.79904em;
 }

완벽하게 사용하지 않고 18/10 :

h5 { 
 font-size: 1.8em;
 }

Google Chrome에 따르면 18.0096px를 얻습니다.