WeChat Mini Program Development - WXSS
WXSS is a set of styles customized by WeChat, which is basically the same as CSS, but adds two concepts on the basis of CSS
measurement unit
rpx (responsive pixel) : It can be adaptive 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, so 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.
rem (root em): The specified screen width is 20rem; 1rem = (750/20)rpx.
| Suggestion: Designers can use iPhone 6 as the standard for mockups when developing WeChat mini-programs. Note: There will inevitably be some glitches on smaller screens, please try to avoid this when developing. |
style import
(1) Importing external style sheets: Use the @import statement to import external style sheets. @import is followed by the relative path of the external style sheet that needs to be imported. Use ; to indicate the end of the statement.
| /** common.wxss **/ .small-p { padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; } |
(2) Inline style: The frame component supports the use of style and class attributes to control the style of the component.
| Style: accepts dynamic styles, which will be parsed at runtime, try to avoid writing static styles into style, so as not to affect the rendering speed. <view style="color:{{color}};" /> |
| Class: Used to specify style rules, and its attribute value is a collection of class selector names (style class names) in the style rules. <view class="normal_view" /> |
(3) Global style and local style: The style defined in app.wxss is a global style, which acts on each page. The style defined in the page's wxss file is a local style, which only applies to the corresponding page and overrides the same selector in app.wxss.