기술나눔

유니앱 적응 솔루션

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

uni-app만의 강력한 적응형 유닛 upx 및 rpx는 솔루션을 동적으로 할당할 수 없습니다...

uni-app은 기본 크기 단위로 upx를 사용합니다. 이는 기본 너비에 상대적인 단위이며 화면 너비에 따라 조정될 수 있습니다. uni-app은 화면 기본 너비를 750upx로 지정합니다.

개발자는 디자인 초안의 기본 너비를 통해 페이지 요소의 upx 값을 계산할 수 있습니다. 디자인 초안의 1px와 프레임 스타일의 1upx 사이의 변환 공식은 다음과 같습니다.
디자인 초안 1px / 디자인 초안 기본 너비 = 프레임 스타일 1upx / 750upx

예를 들어:
디자인 초안의 너비가 640px이고 디자인 초안의 요소 A의 너비가 100px인 경우 uni-app의 요소 A의 너비는 750 *100 / 640으로 설정되어야 하며 결과는 117upx입니다.
디자인 초안의 너비가 375px이고 디자인 초안의 요소 B의 너비가 200px인 경우 uni-app의 요소 B의 너비는 750 * 200 / 375로 설정되어야 하며 결과는 400upx입니다.

아래 그림과 같이 디자인 시안의 폭은 1920 입니다.

여기에 이미지 설명을 삽입하세요.
------공식에 따르면设计稿宽度 / 750 = 比率 그런 다음 1920/750=2.56은 1920년 폭 설계 초안의 표준 750%를 계산합니다------

편의를 위해 Hbuilder X를 클릭하세요.工具>设置>语言服务配置맨 아래로 스크롤하시면 px to rpx/upx 가 있는데 위에서 계산한 비율을 그 안에 넣어주세요

여기에 이미지 설명을 삽입하세요.
실제 효과:

여기에 이미지 설명을 삽입하세요.
이러한 방식으로 입력한 px 크기는 해당 upx 크기로 자동 변환됩니다.

그냥 upx를 선택하세요