Shulou(Shulou.com)06/01 Report--

This article mainly introduces what is WXSS in WeChat Mini Programs. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

WXSS

WXSS (WeiXin Style Sheets) is a set of style languages used to describe the component styles of WXML.

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

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

Compared with css, we have extended the following features:

Unit of size

Style import

Unit of size

Rpx (responsive pixel): can be adapted to the width of the screen. Specify the screen width as 750rpx. If on iPhone6, the screen width is 375px and there are 750physical pixels, then 750rpx = 375px = 750physical pixels, 1rpx = 0.5px = 1 physical pixels.

Device rpx conversion px (screen width / 750) px conversion rpx (750 / screen width) iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx

Suggestion: designers can use iPhone6 as the standard of visual manuscript when developing WeChat Mini Programs.

Note: there will inevitably be some burrs on the smaller screen, so try to avoid this when developing.

Style import

Use the @ import statement to import the outreach stylesheet, and the relative path between @ import and the external stylesheet you want to import, with; indicates the end of the statement.

Sample code:

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

The style and class attributes are supported on the framework component to control the style of the component.

Style: static styles are written into class. Style receives dynamic styles and parses them at run time. Try to avoid writing static styles into style, so as not to affect the rendering speed.

Class: used to specify style rules, whose attribute values are a collection of class selector names (style class names) in style rules. Style class names do not need to be accompanied by., style class names are separated by spaces.

Selector

Currently supported selectors are:

The selector sample description .class.intro selects all components with class= "intro" # id#firstname selects components with id= "firstname" elementview selects all view components element, elementview checkbox selects all document view components and all checkbox components:: afterview::after inserts content after view components:: beforeview::before inserts global and local styles of content in front of view components

The styles defined in app.wxss are global styles that work on each page. The style defined in the wxss file of page is partial, works only on the corresponding page, and overrides the same selector in app.wxss.

The above is all the contents of the article "what is WXSS in WeChat Mini Programs?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.