Detailed explanation of WeChat mini program rpx size unit and style usage

This article mainly introduces the relevant information about the rpx size unit and style details of the WeChat applet. It can effectively help everyone develop WeChat applet and avoid mobile phone size problems. Friends who need it can For reference,

WeChat mini program size unit

rpx unit is the size unit of CSS in WeChat mini program, and rpx can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

WeChat applet also supports the rem size unit, the conversion relationship between rem and rpx: rem: the specified screen width is 20rem; 1rem = (750/20)rpx
Note: When developing WeChat mini programs, designers can use iPhone6 ​​as the standard for visual drafts.
Suggestion: It is easier to calculate the design draft using a device width of 750px. If 750px is 750px, 1rpx=1px. In this case, the size measured in the design drawing is the number of px that is the number of rpx. As for the actual conversion on different devices, rem is left to the mini program to convert by itself

How to import the style of the mini program

Use the @import statement to import the external style sheet, @import is followed by the external style sheet that needs to be imported Relative path, use; to indicate the end of the statement.

Sample code:

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

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

Introduction to mini program inline style

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

style: Static styles are written uniformly in class. style receives dynamic styles and will parse them at runtime. Please try to avoid writing static styles into style to avoid affecting the rendering speed.

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

class: used to specify style rules. Its attribute value is a collection of class selector names (style class names) in the style rules. The style class name does not need to include., and spaces are used between style class names. Separate.

<view class="normal_view" />

WeChat applet css selector

The selectors currently supported by WeChat applet are:

Selector

Sample

Sample description

Global styles and local styles of the applet

The styles defined in app.wxss are global styles and apply to every page . The styles defined in the wxss file of page are local styles, which only apply to the corresponding page and will override the same selector in app.wxss.

The above is the detailed content of Detailed explanation of WeChat mini program rpx size unit and style usage. For more information, please follow other related articles on the PHP Chinese website!