Introduction to WXSS in WeChat Mini Program

This article mainly introduces the relevant information of WeChat applet WXSS, and attaches simple example code. Friends in need can refer to

WXSS

##WXSS( WeiXin Style Sheets) is a style language designed by MINA for describing WXML component styles.

WXSS is used to determine how WXML components should be displayed.

In order to adapt to the majority of front-end developers, our WXSS has most of the features of CSS. At the same time, in order to be more suitable for developing WeChat applets, we have expanded and modified the CSS.

Compared with css, our extended features are:

Dimension unitStyle import

Size unit

rpx (responsive pixel): can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone 6, 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.

Devicerpx to px (screen width/750)px to rpx (750/screen width)iPhone51rpx = 0.42px#1px = 2.34pxiPhone61rpx = 0.5px1px = 2rpxiPhone6s1rpx = 0.552px1px = 1.81rpx rem (root em): Specifies the screen width to be 20rem; 1rem = (750/20)rpx.

Suggestion: When developing WeChat mini programs, designers can use iPhone6 ​​as the standard for visual drafts.

Style import

Use the @import statement to import an external style sheet. @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. .

Sample code:

/** common.wxss **/
.small-p{
 padding:5px;
}

##

/** app.wxss **/
@import "common.wxss";
.middle-p:{
 padding:15px;
}

Inline style

MINA components support using style and class attributes to control the style of the component.

style: Static styles are written uniformly into classes. style receives dynamic styles and will parse them at runtime, so do not write 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 need to be accompanied by., the style class name. Separate with spaces.

<view class="normal_view" />

Selector

Currently supported selectors are:

Selector.classidelementelement, element::after::before

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

Global styles and local styles

The styles defined in app.wxss are global styles and apply to every page. The styles defined in the wxss file of the page are local styles, which only apply to the corresponding page and will override the same selector in app.wxss.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the introduction of WeChat applet slider

About WeChat applet implementation of top tab (swiper ) Introduction

About WeChat JS-SDK’s function of selecting mobile phone photo upload

The above is the detailed content of Introduction to WXSS in WeChat Mini Program. For more information, please follow other related articles on the PHP Chinese website!