위챗 애플릿화면 맞춤식 해석

인용문

이전에 작은 프로그램 프로젝트를 할 때 약간의 곤혹스러움을 만났다.
코드를 붙이려면 다음과 같이 하십시오.

wx.getSystemInfo({
  success: function (res) {
    windowWidth = res.windowWidth;
    windowHeigth= res.windowHeight;
    px2rpx = 750 / windowWidth;
  }
})

애플릿은 어떻게 화면이 잘 어울리는 문제를 해결합니까

우리는 모두 작은 프로그램이 크로스 시스템의 플랫폼이라는 것을 안다.이것은 작은 프로그램이 서로 다른 장치에서 실행되지만 장치마다 해상도가 다르다는 것을 의미한다.작은 프로그램에서 어떻게 해상도가 다른 장치에서 시각 요소의 정상적인 디스플레이를 보장합니까?rpx라는 동적 치수 단위가 필요합니다.
다음은 여러분을 위해 작은 프로그램rpx 단위의 전체 해석을 하겠습니다. rpx와 관련된 모든 의문을 해결하는 데 도움을 줄 수 있기를 바랍니다.왜 동적 단위와 rpx가 필요합니까?
디스플레이에서 모든 화면은 무수한 점진으로 이루어져 있다.이 점진에서 모든 점을 픽셀이라고 하는데 바로pixel이다.위의 그 말은 많은 사람들에게 상식이다.그러나 리티나 스크린(즉 망막스크린)의 출시와 고해상도 스크린의 보급에 따라 1px가 대표할 수 있는 실제 길이는 변하지 않는다.크로스플랫폼, 크로스설비의 응용에 있어 단순히 px를 사용하면 수요를 만족시킬 수 없다.이것은 작은 프로그램의 요소가 서로 다른 장치에서 정상적으로 나타날 수 있도록 보장하기 어렵다. 같은 px 사이즈의 요소는 높은 화면에서 낮은 화면에서 나타나는 것보다 훨씬 작아 보이기 때문이다.따라서 우리는 동적 길이 단위가 필요하다.이 단위는 서로 다른 화면의 해상도를 조정하고 어댑터함으로써 같은 요소가 서로 다른 화면에 나타나는 것이 정상적임을 보장한다.
애플과 Google은 이에 대해 다음과 같은 조치를 취하고 있습니다.

애플은 고해상도 스크린에 대한 최적화가 양호하기 때문에 iOS에서 코드의 1px가 대표하는 실제 픽셀 수는 서로 다른 장치에 따라 동태적으로 조정되기 때문에 개발자는 2차 환산을 할 필요가 없다.

안드로이드 장치의 파편화가 심해서 Google은 해상도에 따라 화면의 크기 환산에 적합한 새로운 크기 단위를 만들어야 합니다.

위챗도 작은 프로그램에 동적 단위 해결 방안을 제공했다. 그것이 바로responsive pixel (동적 픽셀) 이고 rpx라고 약칭한다.Pixel과 rpx, dp는 어떻게 환산합니까?동적 단위가 어떻게 생겼는지 이해한 후에 우리는 다음 단계에 px와 rpx, dp 사이를 어떻게 환산하는지 배워야 한다.
동적 단위 dp와 px 환산의 기본 개념은 다음과 같다. **는 해상도를 기준으로 하고 기준 해상도에서 픽셀의 길이가 얼마나 길고 다른 화면에서 같은 길이를 나타낸다.예를 들어 dp와 px 환산 공식은 dp=px*(목표 장치 dpi 해상도/160)이다.
그러나 위챗 애플릿의 rpx 환산 방식은 다른 동적 단위의 환산 방법과 다소 차이가 있을 수 있다.위챗이 공식적으로 제공하는 환산 방식은 좀 더 바보적이다. rpx=px*(목표 장치의 폭 px값/750).예를 들면 다음과 같습니다.

대상 장치의 폭이 375px이면 750rpx로 환산하면 1rpx = 0.5px

대상 장치의 폭은 1125px이면 환산 후 1rpx = 1.5px

생각해보니까 좀 이상하지 않아요?맞아요. 위챗 애플릿을 태블릿PC에 놓고 실행하면 화면의 너비 px값이 바뀔 수 있어요(가로 세로 화면, 분할 화면 모드 등).이때 다시 너비를 기준으로 하면 원소가 정확하게 보이지 않는 문제가 발생할 수 있다.이를 통해 알 수 있듯이 위챗팀은 현재 애플릿을 휴대전화 이외의 장치로 확장하기를 원하지 않는다.따라서 개발자들은 당분간 애플릿의 휴대전화 체험을 향상시키는 데 전념할 수 있어 다사이즈 스크린이 가져오는 적당한 배합 문제를 걱정할 필요가 없다.그럼 rpx와 dp를 직접 교환할 수 있을까요?
당연히 안 되지!dp는 화면 해상도를 기준으로 하는 동적 단위이고 rpx는 길이를 기준으로 하는 동적 단위이다.'미'와'평방 센티미터'가 서로 바꿀 수 없듯이 dp와 rpx 둘도 직접적으로 바꿀 수 없다. 위챗이 공식적으로 rpx를 길이 기준이 아닌 해상도 기준으로 설정하지 않는 한.디자이너는 어떻게 해야 하나요?위챗에서 rpx 동적 단위를 사용했기 때문에 디자인 원고의 사이즈 단위도 rpx를 사용하는 것을 추천합니다.그렇다면 rpx 단위를 바꾸려면 어떤 사이즈의 스크린을 디자인 원고의 표준으로 삼는 것이 적당할까요?위챗 공식 문서에서 우리는 이런 말을 보았다.
아이폰6에서는 화면 폭이 375px로 총 750개의 물리적 픽셀이 있으면 750rpx = 375px = 750물리적 픽셀, 1rpx = 0.5px = 1물리적 픽셀이다.위챗 애플릿을 개발할 때 디자이너는 아이폰6를 시각 원고의 표준으로 사용할 수 있다.즉, 디자이너는 애플릿을 설계할 때 다음과 같이 할 수 있습니다.

직접 아이폰6 화면 크기(375)×667) 시각 원고의 사이즈로 1px=2rpx;

1px = 1rpx 표준으로 설계 원고 사이즈 750으로 설정×1334.

사실, 여기까지, 이미 설명, 느낌 너무 간단하다!!!

식후

현재 나는 이전의 프로젝트에서 각종 연산된 px값을 사용하여 페이지의 사이즈를 직접 개발한 것을 정말 후회한다. 시간이 걸리고 말하지 않아도 스타일에 약간의 흠이 있을 것이다.

사용자 정의 규칙

사실 애플릿의 전단 개발을 하는 데 있어서 가장 간편하고 실질적인 방법은 화면 크기(375)로 해야 한다×667) 시각 원고의 크기로 UI 디자이너의 디자인 레이아웃을 사용하고 px 값을 직접 사용하면 적응할 수 있습니다~
새 도면층 크기는 rpx입니다.× 375px, 모든 사이즈는 667px에 따라 계량 단위이다.기입 단위 환산 기준: px.컨트롤 크기는 WeUI 프런트엔드 스타일 라이브러리의 표준을 따릅니다.
디자인 원고를 프로그래머에게 전달하기 전에 디자이너는 디자인 원고의 사이즈와 단위 환산 기준 등을 명확하게 묘사하여 프로그래머가 인터페이스 효과를 신속하게 실현하도록 해야 한다.작은 프로그램이 서로 다른 사이즈의 기종에 완벽하게 드러나게 하려면 이 글을 잘 소화하세요.