微信小程序开发基础知识2

一、rpx介绍

1、什么是rpx尺寸单位

rpx (responsive pixel) 是微信小程序独有的，用来解决屏适配的尺寸单位。

2、实现原理

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。

• 在较小的设备上，1rpx 所代表的宽度较小
• 在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

例如：

设备	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 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。

二、样式导入

1、什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

2、@import的语法格式

• 在根目录下创建common文件夹以及在文件下创建**.wxss文件

• 在**.wxss文件中设置样式

//common.wxss
.outside{
  color: red;
}

• 在app.wxss中进行导入：@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下:

//app.wxss
@import "/common/common.wxss";

• 使用class为outs