当前位置：网站首页>[wechat applet] wxss template style

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 , In width Divide equally into 750 Share （ namely ： The total width of the current screen is 750rpx）.

stay smaller On the device ,1rpx The width represented is small

stay more On the device ,1rpx The width represented is large

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 .

3. rpx And px Unit conversion between （ understand ）

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

equipment	rpx conversion px ( Screen width /750)	px conversion rpx (750/ Screen width )
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

The official advice ： When developing wechat applets , Designers can use iPhone6 As The standard of visual manuscript .

Development examples ： stay iPhone6 If you want to draw wide 100px, high 20px Box , The conversion rpx Company , The width and height are respectively 200rpx and 40rpx.

WXSS Template style - Style import

1. What is style import

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

2. @import The grammar of

@import Followed by the... Of the external stylesheet that needs to be imported Relative paths , use ; End of statement . Examples are as follows ：

WXSS Template style - Global and local styles

1. Global style

It's defined in app.wxss The style in is Global style , For every page .

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}