WeChat Mini 프로그램의 WXSS 소개-미니 프로그램 개발-php.cn

WeChat Mini 프로그램의 WXSS 소개

不言

풀어 주다： 2018-06-27 17:40:38

원래의

2137명이 탐색했습니다.

이 글은 주로 WeChat 애플릿 WXSS 관련 정보를 소개하고 간단한 예제 코드를 첨부합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

WXSS

WXSS(WeiXin Style Sheets)는 MINA가 디자인한 스타일 언어입니다. WXML 구성 요소 스타일.

WXSS는 WXML 구성 요소가 표시되는 방법을 결정하는 데 사용됩니다.

대부분의 프런트엔드 개발자에게 적응하기 위해 저희 WXSS는 CSS의 기능을 대부분 갖추고 있습니다. 동시에 WeChat 애플릿 개발에 더욱 적합하도록 CSS를 확장하고 수정했습니다.

CSS와 비교하여 확장된 기능은 다음과 같습니다:

크기 단위
스타일 가져오기

크기 단위

rpx(반응형 픽셀): 화면 너비에 따라 조정될 수 있습니다. 지정된 화면 너비는 750rpx입니다. 예를 들어 iPhone 6의 화면 너비는 375px이고 총 750개의 물리적 픽셀이 있으며, 750rpx = 375px = 750개의 물리적 픽셀, 1rpx = 0.5px = 1개의 물리적 픽셀입니다.

Device	rpx에서 px(화면 너비/750)	px에서 rpx(750/화면 너비)
iPhone5	1rpx = 0.42px	1px = 2. 34px
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

다시 m(root em): 화면 너비를 20rem으로 지정합니다. 1rem = (750/20)rpx.

제안: 디자이너는 WeChat 미니 프로그램을 개발할 때 iPhone6를 시각적 초안의 표준으로 사용할 수 있습니다.

스타일 가져오기

외부 스타일 시트를 가져오려면 @import 문을 사용하세요. @import 뒤에는 가져와야 하는 외부 스타일 시트의 상대 경로가 오고 ";"은 문의 끝을 나타냅니다.
샘플 코드:

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

로그인 후 복사

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

로그인 후 복사

인라인 스타일

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

스타일: 정적 스타일은 클래스에 균일하게 작성됩니다. 스타일은 동적 스타일을 받아 런타임에 구문 분석하므로 렌더링 속도에 영향을 주지 않으려면 스타일에 정적 스타일을 쓰지 마십시오.

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

로그인 후 복사

class: 스타일 규칙을 지정하는 데 사용됩니다. 해당 속성 값은 스타일 규칙의 클래스 선택자 이름(스타일 클래스 이름)의 모음입니다. 스타일 클래스 이름은 함께 사용할 필요가 없습니다. 공백으로 구분됩니다.

<view class="normal_view" />

로그인 후 복사

Selector

현재 지원되는 선택기는

Selector	Sample	샘플 설명
.class	.intro	class="intro로 소유한 모든 컴포넌트를 선택하세요. "
#id	#firstname	id="firstname"인 구성 요소 선택
element	view	모든 보기 구성 요소 선택
element, element	보기 확인란	다음을 선택하세요. 모든 문서의 구성 요소 및 모든 확인란 구성 요소 보기
::after	view::after	보기 구성 요소 뒤에 내용 삽입
::before	view::before	앞에 내용 삽입 뷰 구성 요소