Mini Program wxss style basics

One, the difference between wxss and css

Two, rpx explanation

rpx (responsive pixel) is unique to WeChat applets and is used to solve the size unit for screen adaptation. With this, there is no need to consider the size of the screen

Principle:
rpx divides all device screens into equal parts of 750px, that is, the total width of the current screen is 750. When the rpx
applet runs at the bottom layer, it will automatically convert the rpx style unit to the corresponding pixel unit for rendering, so as to achieve screen adaptation.

Three, rpx and px unit conversion

On iphone6, 1px is equal to 2rpx

Four, style import

wxss provides @import syntax
syntax

@import "commo.wxss";

Import the commo.wxss file

Five, global style

The file in app.wxss is the global style.
Will be applied to every page.

Six, partial style

The style in the wxss of each page is a partial style, which will only be applied to the current page.
When the weight of the local style is greater than or equal to the global style, the global conflicting style will be overwritten.
But when the global style is more important than the local style, the global style will not be overwritten by the local conflicting style.

Guess you like

Origin blog.csdn.net/m0_48459838/article/details/114977298