微信小程序样式
一、尺寸单位rpx
rpx是小程序新增加的自适应单位,可以根据不同设备的屏幕宽度进行自适应缩放。
小程序规定任何型号手机屏幕宽度都是750rpx。
提示:微信小程序的设计稿宽度建议是750px,这样就节省单位换算了。
二、全局样式和局部样式
1、全局样式
在app.less中定义的样式规则,作用于每一个页面,比如:设置字号、宽高、背景色等。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
text {
color: lightseagreen;
font-size: 50rpx;
}
2、局部样式
在页面.less中定义的样式规则,只作用于当前页面,并且会覆盖app.less中相同的样式选择器。
/* pages/mine/mine.wxss */
text {
color: red;
font-size: 30rpx;
}