WeChat mini program rpx unit

The rpx unit is the size unit of CSS in the WeChat applet. 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.

The WeChat applet size unit

rpx unit is WeChat The size unit of CSS in the mini program, 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.

Device	rpx to px (screen width/750)	px to rpx (750/screen width)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

WeChat applet also supports 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

Style import 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;
}

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 You need to bring ., and separate the style class names with spaces.

<view class="normal_view" />

css selector

The selectors currently supported by WeChat applet are:

selector	Sample	Sample description
.class	.intro	Select all components with class="intro"
#id	#firstname	Select components with id="firstname"
element	view	Select all view components
element, element	view checkbox	Select the view components of all documents and all checkbox components
::after	view::after	In view Insert content after the component
::before	view::before	Insert content before the view component

Global styles and local styles of mini programs

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.

For more articles related to the WeChat mini program rpx unit, please pay attention to the PHP Chinese website!