【小程序】小程序学习02

02-wxss

wxss和css

WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。

与CSS相比，WXSS扩展的特性有：

• rpx尺寸单位
• @import样式导入

rpx

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

实现原理

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

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

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

rpx与px单位换算

在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：750rpx=375px=750物理像素
1rpx=0.5px=1物理像素

样式导入

@improt

导入外联的样式表

在根目录创建common/common.wxss

<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>

/* common.wxss */
.username{
    color: red;
}

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

全局样式和局部样式

全局样式

app.wxss

view{
  padding: 1rpx;
  margin: 10rpx;
  background-color: pink;
}

局部样式

仅作用于当前页面

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式