样式

简介 Introduction

• 微信小程序样式文件的后缀名是 .wxss
• 区分全局样式和局部|页面样式
• app.wxss定义的样式是全局样式，作用于所有页面
• 每个页面的.wxss定义的样式是局部|页面样式，只作用于当前页面
• 微信小程序默认使用弹性盒子 Flex 布局，也可以使用网格 Grid 布局

特点 Feature

支持：
• - 支持内联样式 style
• - 支持外部样式导入 @import
• - 支持计算函数 calc()
• - 支持变量使用 var()
• - 支持!important
不支持：
• - 不支持全局定义 :root；只能在顶级标签元素内部定义，如在页面 page 中定义
• - 不支持通配符选择器 * ；只能罗列所有用到的元素
• - 不支持类背景图片；只能通过内联样式定位曲线救国
• - 组件库部分样式优先级高于类样式；只能使用内联样式

选择器 Selector

• 小程序中的 选择器 selector 没有传统CSS那样丰富，特别是在组件样式中，很多不能使用，如标签选择器、ID选择器和属性选择器 - Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors. WHY???
• 尽量使用常规选择器；不要炫技
• 优先使用类选择器
• 小程序提供了很多UI的样式，背离了结构 - 样式 - 逻辑分离的原则，不建议使用，主要是巨丑。。。
• 学会使用调试器检查元素样式

建议使用的选择器

item	desc
类选择器 逗号.	.wrap{}
标签选择器 - 组件标签名	view{} text{}
并列选择器 ,	.wrap, .box{}
后代选择器 - 空格分隔	.wrap item{}
伪元素选择器	::before ::after ::first-letter ::first-line
结构伪类选择器	:nth-child() :first-child :last-child

样式表导入 @import

• 便于样式复用；如初始化样式库、模块样式库等等
• 支持相对路径和绝对路径；以 分号 ; 结束

1. 在样式目录下新建一个样式文件，命名为reset.wxss
2. 初始化常用元素，如边框、轮廓、颜色、字体大小等；可以通过变量定制主题色--themeColor；使用主题颜色：var(--themeColor)
3. 在app.wxss中引入，全局使用

@import './utils/css/reset.wxss';

//页面所有共享
page{
  --themeColor:#eb4450;
  --main-color: #f40;
  --border-color: var(--main-color);
  --padding: 10px;
  --margin: 10px;
  --gap: 10px;
  min-height: 100vh;
  font-size: 28rpx;
  box-sizing: border-box;
}

button{
  width: 100%!important;
  padding: 0;
  margin: 0;
  font-weight: normal;
  border-radius: 0;
}

//元素及其子元素共享
.wrap {
    --main-color: #a4552e;
    padding: 0;
}

• 可以根据需要修改iconfont.wxss的样式，如字体大小、单位、颜色等等
• 为避免频繁使用基类iconfont，可封装为全局组件；详情请参考 自定义组件

单位

• 不推荐使用绝对单位 px；推荐使用以下相对单位
• 更多信息，请访问 CSS unit
1. rpx
• 物理像素 - 实际的像素点
• 逻辑像素 - CSS的像素单位
• DPR - Device Pixel Ratio, 设备像素比：设备的物理像素与逻辑像素之比
• iPhone6：375*667 dpr=2；逻辑像素是 375px*667px，dpr 为2，所以物理像素是 750px*1334px，1个逻辑像素需要2个物理像素来显示
• 通常采用 iPhone6（375*667 dpr=2） 作为设计稿的标准，量取尺寸，使用 rpx 作为单位即可
• responsive px - 响应式像素；小程序专有单位，用来解决屏幕适配；小程序规定任何手机屏幕的宽度都是750份，即750rpx - 逻辑像素；在不同设备上运行时，小程序会自动把 rpx 换算成对应的物理像素，实现适配
• 750rpx = 375px = 750物理像素
• 1rpx = 0.5px = 1物理像素
2. vw vh
• 将屏幕宽高分为100份
3. %
• 百分比

颜色

• 使用16进制颜色，如 #ff4400；支持简写，如 #f40；支持透明色，如 #f406
• 建议使用rgb()
• 更多信息，请访问 CSS color