WeChat 미니 프로그램 rpx 단위-미니 프로그램 개발-php.cn

WeChat 미니 프로그램 rpx 단위

高洛峰

풀어 주다： 2017-02-21 16:06:19

원래의

2047명이 탐색했습니다.

rpx 단위는 WeChat 애플릿의 CSS 크기 단위입니다. rpx는 화면 너비에 따라 조정될 수 있습니다. 지정된 화면 너비는 750rpx입니다. 예를 들어 iPhone6의 화면 너비는 375px이고 총 750개의 물리적 픽셀이 있으면 750rpx = 375px = 750개의 물리적 픽셀, 1rpx = 0입니다.

WeChat 애플릿 크기 단위

rpx 단위는 WeChat입니다. 애플릿의 CSS 크기 단위인 rpx는 화면 너비에 따라 조정될 수 있습니다. 지정된 화면 너비는 750rpx입니다. 예를 들어 iPhone6의 화면 너비는 375px이고 총 750개의 물리적 픽셀이 있으며, 750rpx = 375px = 750개의 물리적 픽셀, 1rpx = 0.5px = 1개의 물리적 픽셀입니다.

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

WeChat 애플릿은 rem 크기 단위도 지원하며 rem과 rpx 간의 변환 관계는 다음과 같습니다. rem: 지정된 화면 너비는 20rem = (750/20)rpx
참고: 개발 디자이너는 WeChat 미니 프로그램을 개발할 때 iPhone6를 시각적 초안의 표준으로 사용할 수 있습니다.
제안: 장치 너비 750px을 사용하면 디자인 초안을 계산하는 것이 더 쉽습니다. 750px가 750px이면 1rpx=1px이 됩니다. 이 경우 디자인 도면에서 측정된 크기는 숫자인 px입니다. rpx의 실제 변환은 rem이 미니 프로그램에 맡겨져 자동으로 변환됩니다.

미니 프로그램의 스타일 가져오기

@import 문을 사용하세요. 외부 스타일 시트를 가져옵니다. @import 뒤에는 가져와야 하는 외부 스타일 시트가 옵니다. 상대 경로는 명령문의 끝을 나타내는 데 사용됩니다.

샘플 코드:

/** common.wxss **/.small-p {  padding:5px;
}

로그인 후 복사

/** app.wxss **/
@import "common.wxss";.middle-p {  padding:15px;
}

로그인 후 복사

미니 프로그램 인라인 스타일

프레임 구성 요소는 스타일 및 클래스 속성을 사용하여 구성 요소의 스타일을 제어할 수 있도록 지원합니다.

스타일: 정적 스타일은 수업 시간에 통일적으로 작성됩니다. 스타일은 동적 스타일을 받아 런타임에 구문 분석합니다. 렌더링 속도에 영향을 주지 않으려면 스타일에 정적 스타일을 작성하지 마십시오.

<view style="color:{{color}};" />

로그인 후 복사

class: 스타일 규칙을 지정하는 데 사용됩니다. 해당 속성 값은 스타일 규칙의 클래스 선택기 이름(스타일 클래스 이름) 모음입니다. .을 가져와야 하며 스타일 클래스 이름을 공백으로 구분해야 합니다.

<view class="normal_view" />

로그인 후 복사

CSS 선택기

현재 WeChat 애플릿에서 지원되는 선택기는 다음과 같습니다:

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容