微信小程序(四) --- 小程序样式

本文详细解析了rpx单位的概念及其在小程序开发中的应用,包括如何将px转换为rpx以实现跨设备适配,介绍了小程序样式引入、选择器限制及使用less进行样式编写的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、单位:rpx

1、是一个相对单位,在不同的机型,rpx的大小不同

2、为了适配不同的机型,可以使用 rpx 来适配

/*
1 小程序中 不需要主动来引用样式,只需要保证命名一样即可
2 需要把页面中某些元素的单位 由 px 改成 rpx
  1 设计稿 750px
    750px = 750rpx
	1 px = 1 rpx
  2 把屏幕宽度改为 375px
	375px = 750rpx
	1px = 2rpx
	1rpx = 0.5px
*/

2、样式引入

1、引入的代码 是通过 @import 来引入

2、路径 只能写相对路径

@import "../../style/common.wxss"	

3、选择器

1、小程序 不支持通配符 *

4、小程序使用 less

步骤:

1、举例 VScode 编辑器

2、安装插件 Easy LESS

3、在VScode编辑那里,加入以下代码

"less.compile": {
    "outExt": ".wxss"
  }

4、直接使用 less 语法

/* 1 定义less变量 */
@color:yellow;
text {
  /* 2 使用变量 */
  color: @color;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值