The official documentation address mp.weixin.qq.com/debug/wxado…

Question? So why are we writing this article?

There is only one answer, so that you can quickly “understand”, for a change of thought, the following article will do a paragraph on the official document.

To accommodate the vast majority of front-end developers, WXSS has most of the features of CSS. At the same time, WXSS expands and modifies CSS in order to be more suitable for the development of wechat small programs. Compared to CSS, WXSS extensions have the following features: dimension units and style imports.

Add: We’ll talk about the features of the extension below. Since the documentation states that WXSS has most of the features of CSS, what’s the difference?

Yes, there is no body attribute in each page of the applet, but you can influence the style of the entire page by setting the page in WXSS, as shown in the following code

page {
    background:#F8F8F8
}Copy the code

You can also set the backgroundColor property in the page’s XXX. Json file to affect the color of the blank area that appears when a page is pulled down.

When working with CSS, we often keep the hierarchy of styles consistent with the hierarchy of HTML contacts, such as the following code in your HTML code

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>Copy the code

We’re used to CSS being written like this

.box .content strong {}Copy the code

The advantage of this is that the style of strong does not affect strong elsewhere. But this parent-child hierarchy is not supported in small programs. You can only set one by one, see the following small program code

<view class="box">
    <text class="box-txt"></text>
</view>Copy the code

How should the corresponding WXSS be written for the above view? Look at the following code

/ / correct. Box {}. Box - TXT {} / / wrong. Box. The box - TXT {}Copy the code

Does that make sense? !

3, size changes in CSS we have a lot of units to measure the size, such as PX, EM and so on, of course, these can still be used in the small program, but the small program has added a unit for themselves, that is RPX.

As mobile apps, miniprograms need to work with different sizes of devices and with bigger and bigger phones (I still like the size of the iphone5, though, which can be controlled with one hand and won’t hit your head watching movies in bed).

So the most important feature of RPX is its ability to adapt to the screen width. It specifies a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.

Does that make sense? The official gave a table, very simple to understand, see the picture below.

alt

This conversion is relatively simple, not explain, if you really do not understand can leave a message.

4, style import small program WXSS support style import, this function is quite useful, especially when we use some other libraries can directly import third-party WXSS files, how happy.

Usage is also very simple, look at the following code.

@import "common.wxss";
.middle-p {
  padding:15px;
}Copy the code

Just like CSS, WXSS supports both class and style styles, but there are differences in usage. In one sentence, “If you have dynamic content in your style, put it in the style file and everything else in the class file.

Take this code

<view style="color:{{color}};" />Copy the code

The problem with writing too many styles to styles is that the applet has to parse the layout of the style while rendering the view, which inevitably has some impact on performance.

In addition, WXSS supports all CSS selectors, such as classes, ids, components, etc

alt

And advanced CSS properties like Last-Child can be used happily in WXSS.

7, the overall style and local style In principle is a small program in a WXSS is responsible for a WXML view files, but for an application there will always be some public attribute, so little for the application program provides a WXSS itself, it is app. WXSS, of course you don’t need artificial introduction, it will automatically load on each view, Keep that in mind.

A summary

About what WXSS supports for CSS, wechat official did not give the corresponding documents, more details we have to slowly dig, after all, Tencent is not Baidu, will write the document so good.