WeChat 미니 프로그램 rpx 크기 단위 및 스타일 사용법에 대한 자세한 설명

이 기사에서는 WeChat 애플릿의 rpx 크기 단위 및 스타일 세부 사항에 대한 관련 정보를 주로 소개합니다. 이는 모든 사람이 WeChat 애플릿을 개발하고 휴대폰 크기 문제를 피하는 데 효과적으로 도움이 될 수 있습니다. 참고로

WeChat 미니 프로그램 크기 단위

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

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

WeChat 애플릿 CSS 선택기

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

선택기

샘플

샘플 설명

애플릿의 전역 스타일과 로컬 스타일

app.wxss에 정의된 스타일은 전역 스타일이며 모든 페이지에 적용됩니다. 페이지의 wxss 파일에 정의된 스타일은 해당 페이지에만 적용되고 app.wxss의 동일한 선택기를 재정의하는 로컬 스타일입니다.

위 내용은 WeChat 미니 프로그램 rpx 크기 단위 및 스타일 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!