CSS를 사용하는 dp (밀도 독립 픽셀) 단위는 무엇입니까?

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 (픽셀 용)로 바꿉니다.

---

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

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

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

---

사용 rem.

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

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

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

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

---

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 단위를 기반으로 한 인터페이스는 어떻습니까?

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

---

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

참고 URL : https://stackoverflow.com/questions/16390762/whats-dp-density-independent-pixels-units-with-css