微信小程序UI设计（一）之开发前言

该系列主要针对微信小程序UI的设计。

既然是UI设计，当然主要设计在（页面描述文件）.wxml和（页面样式文件/样式语言）.wxss。

                                     weixin markup language                                          weixin style sheet

 

一、开始设计前，我们需要知道小程序UI设计的尺寸单位相关问题。

css中有px、cm、mm、in、%等，小程序则加了rpx、rem，建议尽量使用这2种，人以后基本都用rpx。为什么呢？！

因为不同手机屏幕的宽度分辨率不一样，导致不同手机如果用px写死像素点会不能兼容所有手机，于是为了屏幕宽度自适应，规定屏幕宽慰750rpx。这样的话，如iphone6，宽度为375px，则1rpx=0.5px=1像素。

.wxml
<view >
像素自适应
</view>
<view class='px'></view>
<view class='rpx'></view>

.wxss
.px{
  width: 50px;
  height: 100px;
  background-color: red;
}
.rpx{
  width: 50rpx;
  height: 100rpx;
  background-color:black;
}

显示效果：（可以看到px比rpx大2倍）

rem（root em）：同样规定屏幕宽度为20rem，则1rem=（750/20）rpx，自己可以试试。

 

二、样式的导入方法

/** common.wxss **/
.a{
padding:50rpx;
}

/** index.wxss **/
@import "common.wxss";

.b{
padding:100rpx;
}

index.wxml可以使用 a ，b来修饰组件。

这是该设计UI系列注意的点。