Learning notes

Alicloud disk : https://www.aliyundrive.com/s/5Zrfw9EpKwa
Extraction code :37sc

wxss Template style – Introduce

wxss brief introduction

WXSS (WeiXin Style Sheets) It's a style language , To beautify WXML Component style , Similar to... In web development CSS.

wxss and css The relationship between

WXSS have CSS Most features , meanwhile ,WXSS Also on the CSS It has been expanded and modified , To adapt to the development of wechat applet . And CSS comparison ,WXSS The extended features are ：

1. rpx Unit of measure
2. @import Style import

wxss Template style –rpx

What is? rpx

rpx（responsive pixel） It is unique to wechat applet , be used for Solve screen adaptation Unit of size of .

rpx Realization principle

rpx The implementation principle of is very simple ： Given the different screen sizes of different devices , In order to realize the automatic adaptation of the screen ,rpx Put all the devices on the screen , Divide equally in width 750 Share （ namely ： The total width of the current screen is 750rpx）.

1. stay smaller On the device , 1rpx The width represented smaller
2. stay more On the device , 1rpx The width represented more

When applets run on different devices , Will automatically rpx The style units are converted to the corresponding pixel units to render , So as to realize screen adaptation .

rpx And px Unit conversion ( Understanding can )

stay iphone6 On , The screen width is 375px, share 750 Individual physical pixels , Divide equally into 750rpx, be :
750rpx = 375px =750 Physical pixel
1rpx = 0.5px =1 Physical pixel

wxss Template style – Style import

What is style import

Use WXSS Provided @import grammar , You can import an external style sheet .

@import The grammar of

@import Followed by the relative path of the external stylesheet to be imported , use ; End of statement . Examples are as follows ：

WXSS Template style - Global and local styles

Global style

It's defined in app.wxss The styles in are global styles , Act on Every page .

Local style

On page .wxss file The styles defined in are local styles , Only for Current page .

① When a local style conflicts with a global style , according to Nearby principle , Local styles will Cover Global style
② When the local style The weight is greater than or equal to The weight of the global style , Will override the global style

Summary

In the applet wxss In fact, with css There is not much difference , Small program rpx It can better adapt to different screen proportions , It's like css Of rem equally .