안드로이드 DP와 CSS px로 변환하는 방법?

나는 이것이 아마도 멍청한 질문이라고 생각하지만, 정말로 혼란 스럽습니다.

Google Material Design에서 CSS로 구현 한 일부 문서와 함께 문서를 읽고 있습니다. 사양은 Android로 작성되는 dp반면 CSS 코드는 px길이 단위로 사용 됩니다.

나를 혼란스럽게하는 것은 CSS 구현이 종종 사양의 정확한 값을 사용 한다는 것입니다 . 예를 들어 토스트 는 다음과 같아야합니다 .

한 줄 스낵바 높이 : 48dp 높이

최소 폭 : 288dp

2dp 둥근 모서리

해당 CSS :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

내 현재 이해에서 Android DP는 일반적으로 160dpi 화면에서 한 픽셀 크기로 표시되는 반면 CSS px는 시각적 각도로 정의됩니다. 그래서 어떤 거리에서 볼 때 px와 같은 일이 발생 dp합니까? 그렇다면, 일반적인 패턴을 사용하는 것입니다 px으로 dpCSS에서, 또는 CSS 코드를 내가 완전히 한 오해?

디자이너가 아닌 안드로이드 개발에 대해서는 전혀 모른다. 도움을 주셔서 감사합니다.

나는 받아 들여진 것이 틀렸다고 생각한다. CSS px는 실제로 Device Independent Pixel (dip)이며 px를 px에서 dp로 사용하는 일반적인 패턴입니다.

귀하의 질문에 대한 전체 답변은 여기에서 찾을 수 있습니다.

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

dp를 px로 변환하려면 해결하려는 디스플레이 크기를 고려해야합니다. DPI가 클수록 같은 영역에서 더 많은 픽셀을 크래킹하여 픽셀을 잘 보이게하고 픽셀 화 를 피해야 합니다 .

ldpi : 1 dp = 0.75 px
mdpi : 1 dp = 1 px
hdpi : 1 dp = 1.5 px
xhdpi : 1 dp = 2 px
xxhdpi : 1 dp = 3 px
xxxhdpi : 1 dp = 4 px

예 :

CSS 또는 Photoshop의 3x3 dp 사각형은 다음과 같아야합니다.

2.25x2.25 px-ldpi
3x3 px-mdpi (Samsung ACE, Xperia X8)
6x6 px-xhdpi (Xperia S, Google Nexus 4)
9x9 px-xxhdpi (Samsung S4-S5, HTC One)
12x12 px-xxxhdpi (이 resolutin 차세대 장치에 사용됩니다)

위의 내용을 바탕으로 XXHDPI 화면에 3x dp 멀티 플라이어를 사용하여 미적분학이 다음과 같아야합니다.

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android는 사용 된 장치 해상도가 낮을 ​​경우 이미지를 자동으로 축소하므로 XXHDPI를 염두에두고 개발하면 오늘날 시장에 나와있는 대부분의 고급 장치를 처리 할 수 ​​있습니다.

다음은 작업을 수행하는 간단한 변환기입니다. http://androidpixels.net/

W3C는 말합니다 :

따라서 px 장치는 장치의 해상도를 알 필요가 없습니다. 출력이 96dpi, 100dpi, 220dpi 또는 1800dpi인지 여부에 관계없이 전체 px 수로 표현되는 길이는 모든 장치에서 항상 좋아 보이고 매우 유사합니다 (...)

그리고 그것은 말한다 :

px의 모양에 대한 아이디어를 얻으려면 1990 년대 CRT 컴퓨터 모니터를 상상해보십시오. 가장 작은 점은 약 1/100 인치 (0.25mm) 또는 그 이상을 표시 할 수 있습니다. px 단위는 해당 화면 픽셀에서 이름을 얻었습니다.

또한 말합니다 :

실제로 CSS는 모든 인쇄 출력에서 ​​1px가 정확히 1/96 인치 여야한다고 요구합니다 (...)

기본적으로 화면 장치는 96dpi로 구성된다는 점을 고려하면 브라우저가 CSS 픽셀을 해석하는 방법에 대한 최상의 가정입니다.

96 css-px = ~ 1 inch

그리고 우리는 안드로이드에서 그것을 알고 있습니다 :

160 dp = ~ 1 inch

그래서:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

그리고 그것에 따르면 :

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

글쎄, 나는 구글 폴리머의 토스트 크기를 확인할 때까지 옳았다 고 생각했다 .

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

따라서 일대일 변환이며 Android 브라우저에서 다음을 사용합니다.

1 css-px = 1 dp

또한 인치당 96 css-px는 데스크톱 및 랩톱과 같은 다른 장치에서 사용됩니다.

결론 : CSS 픽셀은 장치 dpi와 독립적이며 Android 장치에서는 1 css-px는 1dp입니다.

정답은 없으며 실제로 두 가지가 있습니다.

1. Google에서 권장합니다 (예 : 재료 디자인에 대한 Udacity 과정) : 간단한 경우 변환을 사용하십시오. 대부분의 경우 Polymer 라이브러리와 마찬가지로 1 : 1입니다. 예를 들어 레티 나 디스플레이 에는 적합하지 않으므로 1 : 1이 아니라 공식 머티리얼 디자인 가이드의 장치 테이블에 제공된 밀도 비율 ( 일부 인기있는 장치에 대한 비율 및 특정 메트릭이있는 테이블 ) 을 사용 하고 적절한 @ 미디어 쿼리를 제공하십시오. mdpi 디스플레이 (160dpi / ppi)에 대해 1dp가 1px라고 가정하면 해상도 임계 값 및 자산 .

참고 : 전체 아이디어를 : 페이지 하단에 : 이미지 크기 조정 과 일부 그림이 여러 화면 해상도 임계 값에 대한 비율 (브레이크 포인트 사진)를 시각화

2. 특정 장치에 대해 설계 전반에 걸쳐 매우 일관성을 유지 하려면 더 많은 연구와 계산을 수행하고 원하는만큼 많은 장치를 지원하고 폴백을 제공하기 위해 더 많은 @ 미디어 쿼리를 가져와야합니다. 당신이별로 신경 쓰지 않는 것을 위해 1 위에 언급 된 방법).

여기 주제에 대해 더 자세히 알고 싶어하는 사람들을위한 더 자세한 정보가 있지만 설명과 논리 뒤에는 위의 완전한 대답이 있습니다 .

머티리얼 디자인의 공식 가이드 (레이아웃> 단위 및 측정)에 따르면 "픽셀 밀도"는 다음과 같습니다.

인치에 맞는 픽셀 수

따라서 기본적으로 픽셀 밀도는 ppi 값의 새로운 이름이거나 많은 사람들이 이것을 별도의 것으로 인식하지 못하기 때문에 dpi 값입니다.

동일한 안내서에 따른 1dp의 정의 :

dp는 밀도 160의 화면에서 하나의 물리적 픽셀과 같습니다 . dp를 계산하려면

dp = (픽셀 폭 * 160) / 화면 밀도

CSS를 작성할 때 dp 또는 sp가 지정된 곳마다 px를 사용하십시오. Dp는 Android 개발에만 사용해야합니다.

머티리얼 디자인의 핵심 원칙은 다양한 플랫폼에서 일관된 물리적 치수를 유지하는 것입니다. 이는 데스크톱 해상도, ppi (/ dpi) 및 CSS 픽셀 문제를 발생시킵니다.이 경우 Android의 경우처럼 dp 계산을 고수해야합니다 대부분의 화면이 96ppi (CSS에서 중요한 것으로 가정) 인 것은 사실이 아니며 대부분의 화면이 약간 더 높은 ppi를 가지고 있으며 기존 데스크톱뿐만 아니라 일반 랩톱도 고려하면 또는 태블릿 또는 Surface와 같은 '컨버터블'의 경우 변환이 필요합니다. 일반적으로 100-130ppi 범위이며, 현재 사용중인 것은 127ppi입니다.

100 % = 160ppi-> 물리적 1 픽셀 너비 = 1dp- > 사각형 100x100px = 100x100dp

79 % = 127ppi-> 물리적 1 픽셀 너비 = ca. 0,8dp- > 직사각형 100x100px = 80x80dp

dp는 Android 전용의 새롭고 새로운 단위이지만 모두 dp로 제공되는 MD 레이아웃을 조정하려면 약간의 계산을 수행해야합니다. 특정 요소가 물리적 의미에서 얼마나 큰지 더 많은 아이디어를 원한다면 질문의 목적에 가장 유용한 것은 특정 장치의 재료 설계 지침에서 이상적인 터치 크기 범위 값입니다. ** dp 값 아래에 물리적 인 것. ** dp 값은 변경되지만 물리적 상태는 동일하게 유지됩니다.

단위를 계산 해야하는 이유는 Android API 안내서 (dp 단위를 픽셀 단위로 변환)에서 자세히 설명되며 CSS 스타일의 요소에 여전히 적용됩니다.

경우에 따라 치수를 dp로 표현한 다음 픽셀로 변환해야합니다.

사용자의 손가락이 16 픽셀 이상 움직 인 후 스크롤 또는 플링 제스처가 인식되는 응용 프로그램을 상상해보십시오. 기본 화면에서 사용자는 제스처를 인식하기 전에 16 픽셀 / 160dpi (1/10 인치 (또는 2.5mm))만큼 이동해야합니다. 고밀도 디스플레이 (240dpi)를 사용하는 장치에서 사용자는 1/15 인치 (또는 1.7mm) 인 16 픽셀 / 240dpi로 이동해야합니다. 거리가 훨씬 짧아서 응용 프로그램이 사용자에게 더 민감하게 보입니다.

앞에서 언급 한 Polymer 변환 1 : 1은 아마도 96dpi의 밀도 또는 심지어 내가 준 것의 밀도가 저밀도 또는 심지어 (96dpi의 경우와 같은) 그룹 아래에 있다는 사실 때문일 것입니다. dp 값이 CSS가 아니라는 점을 고려하면 밀도 비율 (0,75- 낮음, 1,0 중간 등)이 단순화 및 여러 크기에 사용해야하는 것으로 가정하는 것이 더 쉽습니다. 화면 지원. 앞에서 언급 한 재료 설계의 장치 테이블에 표시됩니다. 위의 Android API 가이드 장에서 인용 한 모범 사례 중 하나로 언급되었습니다. 그리고 많은 장치들이 레벨 1에서 밀도 비율을 가지기 때문에 폴리머 변환 1 : 1이 좋은 곳입니다.

다른 장치의 미묘한 뉘앙스로 뛰어 들기로 결정한 경우 마지막 딜레마로 돌아 가기 : css px. 당신이 그렇게 궁금하지 않은 경우, MD 테이블의 밀도 비율을 고수하십시오. 그러나 당신이 완벽 주의자라면, CSS 픽셀과 물리적 차원 관계의 핵심은 W3C 후보 추천 에서 완벽하고 아주 간단한 설명을합니다 :

절대 길이 단위는 서로에 대해 고정 및 일부 실제 측정에 고정된다. 출력 환경을 알고있을 때 주로 유용합니다. 절대 단위는 물리적 단위 ( 'in', 'cm', 'mm', 'pt', 'pc', 'q') 와 시각적 각도 단위 ( 'px')로 구성됩니다 .

팔 길이에서 읽을 때 1px는 약 0.26mm (1/96 인치)에 해당합니다.

참고 : 픽셀 단위 및 물리적 단위에 대한이 정의는 이전 버전의 CSS와 다릅니다. 특히 이전 버전의 CSS에서는 픽셀 단위와 물리적 단위가 고정 된 비율과 관련이 없었습니다. 물리적 단위는 항상 물리적 측정과 연결되어 있지만 픽셀 단위는 참조 픽셀과 가장 일치하도록 변합니다. (이것은 너무 많은 기존 컨텐츠가 96dpi의 가정에 의존하고 해당 가정을 위반하면 컨텐츠가 손상되기 때문에 변경되었습니다.)

(물리적 차원을 고려한) px의이 새로운 정의는 CSS 픽셀과 dps 사이의 간격을 메우고 간단한 측정 계산을 사용하여 소위 출력 환경 (이 경우 물리적 의미에서 일관된) 을 보장합니다. ) MD 레이아웃 은 다른 장치 및 플랫폼에서 동일하게 유지됩니다. 또한 W3C 및 MD 가이드 라인 모두 저해상도 및 고해상도 장치 그림을 사용하여 픽셀 / 도트 적용 범위의 핵심 아이디어를 설명합니다. 고해상도 장치에서 1px x 1px 영역을 커버하려면 더 많은 장치 픽셀 (도트)이 필요합니다. 저해상도에서, 이는 레티 나 디스플레이를위한 CSS 쿼리에서 널리 사용되는 것은 실제로 머티리얼 디자인과 모든 모바일 장치에 제공해야하는 것과 동일하지만 더 많은 임계 값을 갖습니다.

결론적 으로 Google 에서 권장하는 MD ​​밀도 비율을 사용 하거나 정밀도에 고정되거나 디자인이 물리적 크기와 완전히 일치해야하는 경우 : 특정 또는 공통의 ppi / dpi 값을 사용하여 정확한 변환을 사용하십시오. Google Resizer 온라인 도구에서 MD 가이드에 제안 된 공통 임계 값과 비율 및 관련 디스플레이 유형 이름 (xlarge, medium 등)에 대한 구분 규칙을 준수하기 때문에 Google resizer 온라인 도구에서 쉽게 테스트 할 수있는 장치 )로 구현되었습니다.

따라서 참조 dp 동일한 픽셀 크기는 mdpi 해상도 (160)에 대한 것이므로 기억하십시오.