样式

rpx单位

rpx（responsive pixel）

可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

• 使用rpx,就不要再使用100%了，在rpx中，750rpx为100%
• 字体单位不要混用，使用rpx去显示字体，否则在ipad上不协调
• 边距尽量用rpx

引入样式

在小程序中，可以在wxss中通过@import导入样式文件

//    导入根目录下文件styles/common.wxss
@import('/styles/common.wxss')

样式覆盖

在开发中，经常会遇到需要覆盖引入组件库样式的问题，主要通过以下方法进行修改。

1. 外层添加class，增加权重

   我们只需要在引入组件上增加一个class属性，并且寻找原组件中需要覆盖的样式。比如以下，我们将checkbox的边框改为金色。

   <van-checkbox value="" shape="square" bind:change="onChange" class="checkbox-gold-border">
    复选框
   </van-checkbox>
   

   .checkbox-gold-border .van-checkbox__icon{
       border:1px solid #ddba85;
   }
   

2. 使用!important覆盖样式

3. 在组件的最外层使用样式

   如果遇到如下场景组件1-子组件1，在页面上直接调用组件1，我们我们将样式写在子组件1内，会发现样式并不起效。这时，可以采用在组件1上直接添加样式类，这个时候并不需要在子组件1上使用样式类。