微信小程序 筆記3 WXSS

WXSS(WeiXin Style Sheets)具有CSS大部分特性。同時爲了更適合開發微信小程序，WXSS對 CSS進行了擴充以及修改。主要體現在兩個方面:

• 尺寸單位
• 樣式導入

CSS兩種寫法：

內嵌(內聯)樣式，行內樣式，外鏈樣式,導入樣式

優先級：行內>內嵌>外鏈

導入方式
 

/**temp.wxss**/
.haha{
  background: pink;
  color: blue;
}

/**my.wxss**/
@import '../temp/temp.wxss'

<!-my.wxml-->
<view class="haha">外部導入樣式文件 </view>

效果：

rpx尺寸單位

可以根據屏幕寬度進行自適應。規定屏幕寬爲750rpx. 如在iPhone6上,屏幕寬度爲375px ,共有.
750個物理像素,則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
 

設備	rpx換算px(屏幕寬度/750)	px換算rpx(750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px  = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

開發時一般選擇iPhone6，因爲方便換算。

計算方法：

iPhone6寬度爲375px，首先用px填滿寬度，將px換成rpx數值乘2(按照上表)