微信小程序保姆级教程（五）- 关于小程序样式需要注意的点

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第五篇：带你了解小程序关于wxss一些不同于css的点

wxss

小程序wxss是用来写样式的，和H5中的css一样，但是又有不同。以下，关于wxss一些需要注意的点：

• 1.wxss不用自己手动去引入样式
• 2.wxss的注释不支持单行注释，所以要注意写成多行注释。
• 3.wxss不支持通配符*，只能够一个个的写标签名进行初始化（如下图）
• 4.app.wxss是全局样式文件，引入字体图标的样式等都可以在app.wxss引入（如下图）
• 5.wxss可以使用rpx，一个响应式像素，原理类似于rem（下文讲解）
• 6.wxss的导入类似于less中的导入
• 7.小程序默认不支持less语法，需下载下载easy less才被支持。（下文讲解）

rpx

关于rpx是小程序中最重要的一个知识点。rpx是一个相对长度单位。在H5中，不管管手机的屏幕是多少的px 宽度统一都是 100%，那么在小程序中呢，100%的屏幕宽度则等于750rpx,那么我们平时开发则可以很轻松的使用rpx进行编程。

比如：

iphone6中：375px = 100% = 750rpx;经换算可得出：1px = 2 rpx

iphone12中：750px = 100% = 750rpx;经换算可得出：1px = 1px

样式导入

1. less中直接 使用 @import 来导入其他less文件

2. 原生的css 也是支持 @import 导入 其他的css文件

3. wxss 也是支持 @import 来导入 其他的wxss文件的。

     /* 导入 只支持相对路径 */
     @import "./styles/reset.wxss"

小程序支持less语法

小程序默认不支持less语法，那么如果想要使用less嵌套语法等的呢？可以使用插件easy less，在vs code中使用如下：

• 安装插件easy less

• 在vs code中配置

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