Article directory
1 WXSS
WXSS (WeiXin Style Sheets) is a style language used to beautify the component styles of WXML, similar to CSS in web development.
2 The relationship between WXSS and CSS
WXSS has most of the features of CSS. At the same time, WXSS also expands and modifies CSS to adapt to the development of WeChat Mini Programs.
Compared to CSS, the features of WXSS extensions are:
rpxmeasurement unit@importstyle import
3 rpx
3.1 rpx size unit
rpx (responsive pixel) is unique to the WeChat applet and is used to solve the size unit of screen adaptation.
3.2 The realization principle of rpx
The realization principle of rpx:
In view of the different screen sizes of different devices, in order to realize the automatic adaptation of the screen, rpx divides the screen of all devices into 750 equal parts in width (ie: the total width of the current screen is 750rpx).
On smaller devices, 1rpx represents a smaller width
On larger devices, 1rpx represents a larger width
When the applet runs on different devices, it will automatically convert the style unit of rpx into the corresponding pixel unit for rendering, thereby realizing screen adaptation.
3.3 Unit conversion between rpx and px
On the iPhone6, the screen width is 375px, with a total of 750 physical pixels divided into 750rpx.
=》750rpx = 375px
=》 1rpx = 0.5px
Conversion of other devices:
Therefore, when developing small programs, it is recommended to use iPhone6 as the standard to facilitate the conversion of units. Multiply the corresponding length and width by 2.
On iPhone6, if you want to draw a box with a width of 100px and a height of 20px, it is converted into rpx units, and the width and height are 200rpx and 40rpx respectively.
Change the model of the emulator
4 Style Import
4.1 Style Import
Out-of-line style sheets can be imported using the @importsyntax .
4.2 Syntax of @import
@importFollowed by the relative path to the out-of-line style sheet that needs to be imported, ;ending with an express statement.
Page structure and data
list.wxml
<!--pages/list/list.wxml-->
<view
wx:for="{
{arr}}"
wx:for-index="idx"
wx:for-item="content"
wx:key="id"
>
id: {
{content.id}}
索引：{
{idx}} -- 当前项：{
{content.content}}
</view>
list.js
// pages/list/list.js
Page({
data: {
arr: [
{
id: 1, content: 'a'},
{
id: 2, content: 'b'},
{
id: 3, content: 'c'},
{
id: 4, content: 'd'},
{
id: 5, content: 'e'}
]
}
})
Outline style sheet
/* common/common.wxss */
view {
margin: 10px;
background-color: cadetblue;
}
Import external style sheets
/* pages/list/list.wxss */
/* 导入外部样式 */
@import "../../common/common.wxss";
input {
border: 1px solid black;
margin: 10px;
}
5 Global styles
The styles defined in app.wxss are global styles that apply to every page.
list page
Cancel the previous style of the page
index.wxml
Do not style any pages
<!--index.wxml-->
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
global style sheet
/**app.wxss**/
view {
margin: 10px;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
}
The style of the page after setting the global style sheet
list page
index page
6 Local styles
The styles defined in the .wxss file corresponding to the page are local styles and only apply to the current page.
Notice:
- When the local style conflicts with the global style, according to the proximity principle, the local style will override the global style
- When the weight of the local style is greater than or equal to the weight of the global style, the global style will be overridden
The weight is the same, according to the principle of proximity; the weight is different, the style is the style with the most weight.
The weights are the same, according to the principle of proximity
global style
/**app.wxss**/
view {
margin: 10px;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
}
Local style for list page
/* pages/list/list.wxss */
view {
background-color: hotpink;
}
Both the local style and the global style are label selectors with the same weight, and the background style conflicts. According to the principle of proximity, the background color is based on the local style of the page. Other styles are not set in the local styles of the page, do not conflict, and follow the global styles.
The weight is different, and the style is the style with the heavier weight
global style
/* app.wxss */
view {
margin: 10px;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
}
view:nth-of-type(1) {
background-color: yellow;
}
Local style for list page
/* pages/list/list.wxss */
view {
background-color: hotpink;
}
Due to view:nth-of-type(1)the addition of a pseudo-class selector, the weight is greater than that of the view label selector in front of the global style, and the weight is also greater than that of the view label selector in the local style. So the color of the first view is yellow.
The weight of the selector can be viewed by hovering over the selector:
