WeChat applet—wxss template style

WeChat applet day02

During this time, some of my friends are asking if there is any good website [for]

study notes

Aliyun Drive: https://www.aliyundrive.com/s/5Zrfw9EpKwa
Extraction code: 37sc

wxss Template Styles – Introduction

Introduction to wxss

WXSS (WeiXin Style Sheets) is a style language used to beautify the component styles of WXML, similar to CSS in web development.

The relationship between wxss and css

WXSS has most of the features of CSS. At the same time, WXSS also expands and modifies CSS to adapt to the development of WeChat Mini Programs. Compared to CSS, the features of WXSS extensions are:

  1. rpx size unit
  2. @import style import

wxss template style – rpx

what is rpx

rpx implementation principle

When the applet runs on different devices, it will automatically convert the rpx style unit into the corresponding pixel unit for rendering, so as to achieve screen adaptation.

rpx and px unit conversion (just understand)

On iphone6, the screen width is 375px750 physical pixels, divided into equal parts 750rpx, then:
750rpx = 375px = 750 physical pixels
1rpx = 0.5px = 1 physical pixel

wxss template style – style import

what is style import

[External style sheets] can be imported using the @import syntax provided by WXSS .[]

Syntax of @import

@import is followed by the relative path of the external style sheet that needs to be imported, with ; indicating the end of the statement. An example is as follows:

WXSS Template Styles – Global and Local

global style

local style


In fact, the wxss in the applet is not much different from the css. The rpx in the applet can better adapt to different screen ratios, just like the css rem.

Leave a Comment

Your email address will not be published. Required fields are marked *