WeChat mini-app WXSS and Wechat mini-app wxss

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!