微信小程序（四） --- 小程序样式

原创于 2020-04-28 19:51:04 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了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;
}