이 글은 주로 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 | 앞에 내용 삽입 뷰 구성 요소 |
전역 스타일과 로컬 스타일
app.wxss에 정의된 스타일은 전역 스타일이며 모든 페이지에 적용됩니다. 페이지의 wxss 파일에 정의된 스타일은 부분 스타일이며 해당 페이지에만 적용되며 app.wxss의 동일한 선택기를 재정의합니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:
WeChat JS-SDK의 휴대폰 사진 업로드 선택 기능에 대하여
위 내용은 WeChat Mini 프로그램의 WXSS 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!