Detailed description of rpx size units and style usage of WeChat mini-app

This article mainly introduces the rpx size units and styles of small programs. it helps you develop small programs and avoid cell phone size problems. For more information, see

How to import small program styles

You can use the @ import statement to import an external style table. @ import is followed by the relative path of the external style table to be imported.

Sample code:

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

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

Introduction to mini-program inline styles

You can use style and class attributes to control the style of a widget.

Style: static styles are uniformly written to the class. The style receives dynamic styles and is parsed during runtime. try to avoid writing static styles into the style to avoid affecting the rendering speed.

Class: specifies a style rule. Its attribute value is a set of class selector names (style class names) in the style rule. style class names do not need to be included. style class names are separated by spaces.

Small program css selector

Currently, applets support the following selectors:

Selector

Example

Example Description

Global and local styles of applets

The style defined in app. wxss is a global style that acts on every page. The style defined in the wxss file of the page is a local style. it only applies to the corresponding page and will overwrite the same selector in app. wxss.

The above is the detailed description of the rpx size unit and style usage of the mini program. For more information, see other related articles in the first PHP community!