Mini-program WXSS, mini-program wxss
Series of articles:
Mini-program tutorial-WXSS
References to mini-program tutorials
Events of mini-program tutorials
Small Program tutorial Template
List rendering of Applet tutorials
Conditional rendering of mini-program tutorials
Data Binding in applet tutorial
Mini-program tutorial-WXML
WXSS
WXSS (WeiXin Style Sheets) is a Style language designed by MINA to describe WXML component styles.
WXSS is used to determine how to display WXML components.
To adapt to the majority of front-end developers, our WXSS has most of the CSS features. At the same time, in order to be more suitable for developing small programs, we have expanded and modified CSS.
Compared with css, our extended features include:
Dimension Unit
Style Import
Dimension Unit
Rpx (responsive pixel): adaptive to screen width. Specify that the screen width is 750rpx. For example, if the screen width of iPhone 6 is 375px and there are 750 physical pixels in total, 750rpx = 375px = 750 physical pixel, and 1rpx = 0.5px = 1 physical pixel.
Device |
Rpx conversion px (screen width/750) |
Px is converted to rpx (750/screen width) |
IPhone 5 |
1rpx = 0.42px |
1px = 2.34px |
IPhone 6 |
1rpx = 0.5px |
1px = 2rpx |
IPhone6s |
1rpx = 0.552px |
1px = 1.81rpx |
Rem (root em): specifies that the screen width is 20rem; 1rem = (750/20) rpx.
Suggestion: when developing small programs, designers can use iPhone 6 as the standard for visual drafts.
Style Import
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;}
Inline Style
The MINA component supports style and class attributes to control the style of the component.
Style: static styles are uniformly written to the class. The style receives dynamic styles and will be parsed at runtime. Therefore, do not write static styles into the style to avoid affecting the rendering speed.
<View style = "color :{{ color }};"/>
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.
<View class = "normal_view"/>
Selector
Currently, the following selectors are supported:
Selector |
Example |
Example description |
. Class |
. Intro |
Select All components with class = "intro" |
# Id |
# Firstname |
Select a component with id = "firstname" |
Element |
View |
Select all view Components |
Element, element |
View checkbox |
Select view components and all checkbox components for all documents |
: After |
View: after |
Insert content behind the view component |
: Before |
View: before |
Insert content in front of the view component |
Global style and local style
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.
Thank you for reading this article. I hope it will help you. Thank you for your support for this site!