WXSS( WeiXin Style Sheets )是?套樣式語?，?于描述 WXML的組件樣式。與CSS相?，WXSS擴(kuò)展的特性有：

1. 響應(yīng)式?度單位rpx。
2. 樣式導(dǎo)?。

1. 尺寸單位

1. rpx （responsive pixel）:可以根據(jù)屏幕寬度進(jìn)??適應(yīng)。規(guī)定屏幕寬為 750rpx。如在iPhone6 上，屏幕寬度為 375px ，共有750個(gè)物理像素，則 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素。

2. 建議： 開發(fā)微信?程序時(shí)設(shè)計(jì)師可以?iPhone6 作為視覺稿的標(biāo)準(zhǔn)。

1.1 使?步驟：

1. 確定設(shè)計(jì)稿寬度 pageWidth。
2. 計(jì)算?例 750rpx = pageWidth px,因此 1px=750rpx/pageWidth。
3. 在less?件中，只要把設(shè)計(jì)稿中的 px => 750/pageWidth rpx 即可。

1.2 像素計(jì)算案例

1.2.1 wxml

<view>
    rpx
</view>

1.2.2 wxss

    /* 
    1. 小程序中是不需要主動(dòng)來進(jìn)行樣式的引入的
    2. 需要將頁面中某些元素的單位有 px 修改為 rpx 
        a. 設(shè)計(jì)稿 750px
        b. 1px = 1rpx
    3.如果將屏幕的寬度修改為 375px
        a. 375px = 750rpx 
        b. 1rpx = 0.5px
    4. 存在一個(gè)設(shè)計(jì)稿寬度是 414 或者 位置 page
        a. 設(shè)計(jì)稿 page中存在一個(gè)元素 寬度為 100 px
        b. 拿以上的需求去實(shí)現(xiàn)不同寬度的頁面進(jìn)行適配

        page = 750rpx
        
        1px = 750rpx / page 
        100px = 750rpx * 100 / page 
    5. 利用一個(gè)屬性 calc 屬性css 和wxss都是支持的  
        a. 750 和 rpx 之間不能出現(xiàn)空格。
        b. 運(yùn)算符的兩遍不能留空格
*/

view {
    /* width: 200rpx; */
    width: calc(750rpx*100/(375));
    height: 200rpx;
    font-size: 40rpx;
    background-color: aqua;
}

1.3 樣式導(dǎo)入

1. wxss中直接就?持，樣式導(dǎo)?功能。
2. 也可以和less中的導(dǎo)?混?。
3. 使? @import語句可以導(dǎo)?外聯(lián)樣式表，只?持相對(duì)路徑。
4. 樣式文件是以.wxss為后綴，不能以.css為后綴。

1.3.1 wxml

    <!-- 
    引入全局樣式文件
  -->
  <view>
      @import引入全局樣式文件
  </view>

1.3.2 外部 wxss

    /*  將其作為一個(gè)全局樣式文件  */

view {
    font-size: 100rpx;
    color: aqua;
}

1.3.3 導(dǎo)入 wxss

    /* 
    1. 使用@import 引入全局樣式文件。
    2. 只能使用相對(duì)路徑
    3. 這里的樣式文件的后綴必須是 .wxss 不能是 css
*/

@import "../style/style.wxss";
view {
    background-color: pink;
}

2. 選擇器

1. 特別需要注意的是 ?程序 不?持通配符 * 因此以下代碼?效！

  *{
      margin:0;
      padding:0;
      box-sizing:border-box;
}

2. ?前?持的選擇器有：

3.?程序中使?less

1. 原??程序不?持 less，其他基于?程序的框架?體都?持，如wepy， mpvue ， taro 等。但是僅僅因?yàn)?個(gè)less功能，?去引??個(gè)框架，肯定是不可取的。因此可以?以下?式來實(shí)現(xiàn)。

2. 使用編輯器 vscode 安裝插件 easy less。

easy less插件

3. 在vscode中設(shè)置插件：

打開settings.json文件進(jìn)行設(shè)置

4. 在settings.json文件中配置如下:

     "less.compile": {
        "outExt": ".wxss"
    }

設(shè)置位置

3.1 編寫less文件測(cè)試

less

@color:red;

view {
    color: @color;
}

3.2 修改原來的wxss文件為 less文件并引入全局的less文件

1. 修改原來的wxss文件為 less文件并引入全局的less文件。引入方式還是和引入 wxss一樣使用 @import "文件相對(duì)路徑" 。

    @import "../style/reset.less";