微信小程序05：样式

• 样式WXSS：WeiXin Style Sheets：是一套样式语言：用于描述WXML的组件样式
• WXSS与CSS相比：
  （1）响应式长度单位：rpx：responsive pixel
  （2）样式导入
• 尺寸单位：rpx：可以根据屏幕宽度进行自适应：微信小程序规定所有的屏幕宽度都定为750rpx：例如在iphone6上，屏幕宽度为375px，共有750个物理像素，则有750rpx = 375px = 750物理像素：得出：1rpx=0.5px=1个物理像素
• 开发微信小程序时设计师可以使用iPhone6作为视觉稿的标准
  （1）确定设计稿的宽度：pageWidth：单位：像素
  （2）计算比例：750rpx = pafeWindth px：得到：1px = 750rpx/pageWidth
  （3）在less文件或WXSS文件中：只要将设计稿中的px换算成750rpx/pageWidth即可

view {
    border: 1rpx solid red;
    /* 设计稿的宽度是100px,屏幕宽度是375px */
    width: calc(750rpx/375*100);
    /* 设计稿的高度是100px, 屏幕宽度是375px */
    /* height: calc(750rpx*100/375); */
    height: 200rpx; /*方便计算的话就直接给出rpx的值,就不借助于calc()了*/
}

• 小程序中不需要主动引入样式文件：
• 需要把页面中某些元素的单位由px改成rpx

设计稿中的屏幕宽度为750px
    750rpx  = 750px
    1rpx    = 1px
    1px     = 1rpx
--------------------------------------------------
设计稿中的屏幕宽度375px
    750rpx  = 375px
    1rpx    = 0.5px
    1px     = 2rpx
--------------------------------------------------
设计稿的屏幕宽度为414px或者未知,记为pageWidth
    750rpx  = pageWidth px
    1rpx    = pageWidth/750 px
    1px     = 750 / pageWidth rpx
--------------------------------------------------
在样式文件中使用一个属性calc(): css与wxss都支持
    calc(元素的宽度*750rpx/pageWidth)
    750与rpx之间不要留空格
    运算符两侧也不要留空格

• 样式导入
  （1）wxss直接支持样式导入功能
  （2）也可以与less中的导入混用
  （3）使用@import语句可以导入外联样式表：支持相对路径
  
• 选择器
• 小程序不支持通配符*选择器