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

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;
}