微信小程序方向：小程序的rpx布局

wxss具有css大部分的特性，同时为了更适合开发微信小程序，wxss对css进行了扩充以及修改，主要体现在两个方面：

• 尺寸单位
• 样式导入

rpx尺寸单位：

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

使用rpx能够去适应多种屏幕的宽度，从而不会因为固定了宽度而导致小屏或大屏样式出现坍塌现象。

1、示例

使用px布局，机型在iphone 6/7/8上的样式

wxss代码：

.item-demo {
  width: 100%;
  height: 70px;
  float: left;
  background: #ddd;
}
.item-demo view:nth-child(1) {
  width: 300px;
  height: 100%;
  float: left;
  font-size: 14px;
}
.item-demo view:nth-child(2) {
  width: calc(100% - 300px);
  height: 70px;
  float: left;
  box-sizing: border-box; 
}
.item-demo view:nth-child(2) image{
  width: 70px;
  height: 70px;
}

图片样式正常.png

图片样式错误.png

因此，微信小程序的rpx主要解决的就是这类问题。示例：

使用rpx布局，机型在iphone 6/7/8上的样式

/* pages/category/category.wxss */
@import "../../templates/common/common.wxss";

.item-demo {
  width: 100%;
  height: 140rpx;
  float: left;
  background: #ddd;
}
.item-demo view:nth-child(1) {
  width: 600rpx;
  height: 100%;
  float: left;
  font-size: 28rpx;
}
.item-demo view:nth-child(2) {
  width: calc(100% - 600rpx);
  height: 140rpx;
  float: left;
  box-sizing: border-box; 
}
.item-demo view:nth-child(2) image{
  width: 140rpx;
  height: 140rpx;
}

图片样式正常.png

图片样式正常.png