這章以后的四章都是介紹小程序樣式文件——wxss 的使用，分為以下三個部分

一、尺寸方案

二、樣式導入

三、選擇器

這章先來講wxss的尺寸單位—— rpx

wxss的定義：

WXSS( WeiXin Style Sheets )是?套樣式語言，用于描述 WXML 的組件樣式。

與 CSS 相比，WXSS 擴展的特性有：

響應式?度單位 rpx 樣式導?

rpx (responsive pixel): 可以根據屏幕寬度進行自適應。

我們規定屏幕寬為 750rpx ，

如在 iPhone6 上，屏幕寬度為 375px ，共有750個物理像素， 則 750rpx = 375px = 750 物理像素， 1rpx = 0.5px = 1 物理像素 。

小程序中，若需要做一個頁面布局，實現頁面的元素大小跟隨屏幕改變而發生改變的話，

則需要用到rpx單位。

接下來，我們用代碼來演示以上知識點。

第一步先來定一個需求：

如下圖所示，此設計稿為 750px，里面包含200px × 200px 的頁面，

并且所含文字的像素是40px

我們要將此設計稿和下圖右側的屏幕相匹配：

屏幕為375rpx，里面的頁面是100 ×100 ，文字是20px

我們要做的就是將750rpx 的設計稿等比例變換為375rpx 的比例

這就是我們的需求了，接下來通過代碼一步步實現了~~

1、打開app.json 文件，新建demo05 頁面

2、打開demo05.wxml 文件，刪掉原先代碼，加入view 標簽，代碼如下

rpx

這里，要補充一點：

小程序中不需要手動引入樣式文件，不需手動添加link 標簽，

只需確保demo05 文件夾下的文件名稱統一均為 demo05 即可，

小程序會自動匹配同名文件并引入。

3、打開demo05.wxss 文件，刪掉原先代碼，寫入如下代碼：

寬：200px；高：200px；字體大小：40px；背景顏色：藍色。

view{ width: 200px; height: 200px; font-size:40px; background-color: aqua;}

保存后，界面如下所示：

可以看到，現在屏幕的寬度為375px，機型為iphone6

若我們先直接將屏幕 由375px 改為 750px , 藍色方塊的比例會隨之變化嗎？

修改后(若找不到750選項，可點擊機型--自定義，手動添加屏幕數據)，

對比前后的藍色部分，可明顯看到是一樣的！

雖然屏幕比例擴大了很多，但是藍色區域還是未隨屏幕比例發生任何改變！

所以要實現這一需求，就需先將頁面中某些元素的單位由 px 修改為rpx，或者修改百分比也行，

即換算單位！

比如：設計稿的像素為750， 則750px =750rpx, 也就是 1px =1rpx

4、 我們將demo05.wxss 中的px 修改為rpx,

由這樣：

view{ width: 200px; height: 200px; font-size:40px; background-color: aqua;}

變為這樣：

view{ width: 200rpx; height: 200rpx; font-size:40rpx; background-color: aqua;}

我們的需求中，是要實現375px 的屏幕， 所以，375px=750rpx，即1px=2rpx 根據這個比例，若將屏幕界面的機型改為 iphone6 (375px)，那藍色區域的部分應該縮小一半！

5、將屏幕界面的機型改為 iphone6 (375px)，觀察藍色區域的大小變化

對比很容易發現，藍色部分已經隨屏幕的比例發生相應改變了！

這也就實現了我們的第一個需求！哈哈

---

上面的例子中，750px 和375px 是等比例關系，很容易換算

那如果現在的設計稿寬度是100px，長度未知，(用page表示)，

用以上代碼如何實現不同寬度的頁面適配呢？

1、換算

page=750rpx

1px=750 rpx/page，將寬度 100px 代入后(兩邊都 ? 100)

100px=750rpx × 100/page

按照小學課本里的換算，

這里100px的賦值可以直接代入到代碼中去

比如這里page=375，width的值還是100px,

view{ width: 100rpx; height: 200rpx; font-size:40rpx; background-color: aqua;}

將 100px=750rpx × 100/375 寫入 width 中：

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

但是，

這不是完全的數學運算，這里的這種直接賦值也是不正確的！！！

不能直接寫成 width: 750rpx× 100/375 這種形式的！

切記！

它需要一個屬性來做外衣—— calc 屬性

2、在demo05.wxss 中，代碼的 width 部分加入 calc 屬性 ，其余不變，代碼如下：

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

敲黑板：

在使用calc屬性時，比如上述代碼 width: calc(750rpx*100/375) 中， 750與rpx之間是不能有空格的！ 運算符* / 兩邊也是不能加空格！

保存后，界面如下:

3、改變屏幕比例，改為750px,觀察藍色部分的大小變化！

對比來看，藍色部分明顯已經發生變化！我們的需求完成了！

所以，最后總結：

要想實現不同寬度的頁面適配，記住兩點即可

100px=750rpx × 100/page

使用calc 屬性 來書寫

大家實操后感覺如何呢？

歡迎下方留言給我，

有疑問可以直接私信我哈~~~