WeChat Open Platform

Mini Programs Documentation

WXSS

WXSS (WeiXin stylesheets) is a style language that is used to describe WXML component styles.

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

Our WXSS possesses most of the features of CSS, to suit a large number of front-end developers. We have also expanded and modified CSS to make it more suitable for the development of WeChat Mini Programs.

Compared to CSS, we have expanded the following features:

  • Units of measurement
  • Style importation

Units of measurement

  • rpx (responsive pixel): can adapt according to screen width. Specified screen width is 750rpx. On the iPhone 6, if screen width is 375px and there are a total of 750 physical pixels, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.
Device rpx converted into px (screen width/750) px converted into rpx (750/screen width)
iPhone 5 1rpx = 0.42px 1px = 2.34rpx
iPhone 6 1rpx = 0.5px 1px = 2rpx
iPhone 6 Plus 1rpx = 0.552px 1px = 1.81rpx

Recommendation: Designers can use the iPhone6 as the mockup standard when developing WeChat Mini Programs. Note: It is inevitable that there will be some glitches on smaller screens, please try to avoid these situations when developing.

Style importation

External stylesheets can be imported using the @import statement. The relative path for the external stylesheet that needs to be imported that follows @import uses ; to indicate the end of the statement.

Sample code:

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

Internal styles

Framework components support the use of style and class attributes to control component style.

  • style: static styles are written uniformly in class. When style receives a dynamic style, it will perform analysis while running. Please try to avoid writing static styles in style to prevent the rendering speed from being affected.
<view style="color:{{color}};" />
  • class: used to specify style rules, its attribute values are the selector name (style name) sets in the style rules. Style names do not need to include a ., they are separated by spaces.
<view class="normal_view" />

Selectors

The currently supported selectors are:

Selector Example Example description
.class .intro Selects all components that contain class="intro"
#id #firstname Selects all components that contain id="firstname"
element view Selects all view components
element, element view, checkbox Selects all document view components and all checkbox components
::after view::after An insertion after a view component
::before view::before An insertion before a view component

Global and local styles

The styles defined in app.wxss are global styles that act on every page. The styles defined in the Page WXSS file are local styles that only act on the corresponding page and will overwrite the same selector in app.wxss.