WeChat widget WXSS

May 18, 2021 WeChat Mini Program Development Document

1. WXSS

2. Dimension units

3. Style import

4. Inline style

5. Selector

6. Global styles and local styles

WXSS

WeiXin Style Sheets is a set of style languages that describe component styles for WXML.

WXSS is used to determine how components of WXML should be displayed.

To accommodate a wide range of front-end developers, our WXSS has most of the features of CSS. At the same time, in order to be more suitable for the development of WeChat small programs, we have expanded and modified CSS.

Our extended features compared to css are:

Dimension units

rpx pixel: Adapts to the width of the screen. T he screen width is set at 750rpx. F or example, on the iPhone 6, where the screen width is 375px and there are 750 physical pixels, then 750rpx is 375px is 750 physical pixels, and 1rpx is 0.5px is 1 physical pixel.

Equipment	rpx conversion px (screen width/750)	px conversion rpx (750/screen width)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

Recommendation: Designers can use the iPhone 6 as the standard for visual documents when developing WeChat applets.

Note: Inevitably there will be some burrs on smaller screens, so try to avoid this when developing.

Style import

Use @import to import an outreach style @import relative path of the outreach style sheet that needs to be imported; ; Represents the end of the statement.

Example code:

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

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

Inline style

The use of style, class properties to control the style of components is supported on framework components.

Style: Static style is written in the class.Style receives a dynamic style that is resolved at runtime, try to avoid writing static styles into the Style so as not to affect the rendering speed.

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

Class: Used to specify a style rule, its property value is a collection of class selector names . class names) in style rules, style class names do not need to be with .

<view class="normal_view" />

Selector

The selectors currently supported are:

Selector	Example	Example description
.class	`.intro`	Select all components that have class"intro"
#id	`#firstname`	Select a component that has the id "firstname"
element	`view`	Select all view components
element, element	`view` `checkbox`	Select the view component for all documents and all checkbox components
::after	`view::after`	Insert content behind the view component
::before	`view::before`	Insert content in front of the view component

Global styles and local styles

The style defined in app.wxss is a global style that serves every page. The style defined in page's wxss file is local, only on the corresponding page, and overrides the same selector in app.wxss.