【小程序】wxss与rpx单位以及全局样式和局部样式

叁歲伎倆 2024-03-30 11:29 21阅读 0赞

**目录**

WXSS

1. 什么是 WXSS

2. WXSS 和 CSS 的关系

rpx

1. 什么是 rpx 尺寸单位

2. rpx 的实现原理

3. rpx 与 px 之间的单位换算\*

样式导入

1. 什么是样式导入

2. @import 的语法格式

全局样式和局部样式

1. 全局样式

2. 局部样式

## WXSS ##

### 1. 什么是 WXSS ###

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中

的 CSS。

### 2. WXSS 和 CSS 的关系 ###

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序

的开发。 与 CSS 相比，WXSS 扩展的特性有：

rpx 尺寸单位

@import 样式导入

![7952011e52ea44909effd5be36466ab9.png][]

## rpx ##

### 1. 什么是 rpx 尺寸单位 ###

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

### 2. rpx 的实现原理 ###

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有

设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。 在较小的设备上，

1rpx 所代表的宽度较小 在较大的设备上，1rpx 所代表的宽度较大 小程序在不同设备上运行的时

候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

### 3. rpx 与 px 之间的单位换算\* ###

在 iPhone6 上，屏幕宽度为375px，共有 750 个物理像素，等分为 750rpx。则： 750rpx = 375px

= 750 物理像素 1rpx = 0.5px = 1物理像素![556af4cc4be34f56b103c13910b1e953.png][]

官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。 开发举例：在

iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。

## 样式导入 ##

### 1. 什么是样式导入 ###

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

### 2. @import 的语法格式 ###

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：

![63965f35b9774944b85d5c97273cffeb.png][]

## 全局样式和局部样式 ##

### 1. 全局样式 ###

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

### 2. 局部样式 ###

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。 注意： 当局部样式和全局样

式冲突时，根据就近原则，局部样式会覆盖全局样式 当局部样式的权重大于或等于全局样式的权

重时，才会覆盖全局的样式

[7952011e52ea44909effd5be36466ab9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/88e024a64d9d457ca25efb02d6a28611.png
[556af4cc4be34f56b103c13910b1e953.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/27d2b4efe60b45d5afe901fa6f57443f.png
[63965f35b9774944b85d5c97273cffeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/907bfa89c8184e7da25e34ca3da4153d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】wxss与rpx单位以及全局样式和局部样式

目录 WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 p

叁歲伎倆/ 2024年03月30日 11:29/ 0 赞/ 22 阅读

相关微信小程序---wxss模板样式

微信小程序day02 学习笔记 wxss模板样式--介绍 wxss简介 wxss和css的关系 wxss模板样式--rpx

ゞ浴缸里的玫瑰/ 2023年10月07日 19:16/ 0 赞/ 19 阅读

相关微信小程序中rpx与rem单位使用

本文讲解rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起： [微信小程序官方文档][Link 1] [web app变革之rem][web app_re

太过爱你忘了你带给我的痛/ 2022年07月14日 06:18/ 0 赞/ 165 阅读

相关微信小程序wxss设置样式

[微信小程序wxss设置样式][wxss] 对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来一、wxml 界面结构wxmL

ゝ一纸荒年。/ 2022年01月31日 03:25/ 0 赞/ 1314 阅读

相关小程序全局样式(app.wxss 源码分享)

小程序拥有丰富的组件，当下专为小程序设计的UI框架也不多。小编个人觉得做小程序，UI框架用和不用没什么区别，使用好官方的组件足够了。但拥有一款优秀的全局样式表，助你绕坑和提升效

比眉伴天荒/ 2022年01月10日 03:41/ 0 赞/ 256 阅读

相关 css 小程序单位rpx及rem

rpx 微信小程序单位规定屏幕宽度为750rpx rpx和px的转换如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，

àì夳堔傛蜴生んèń/ 2021年09月19日 13:50/ 0 赞/ 462 阅读

相关微信小程序学习笔记（3）-全局的样式（app.wxss）与通用布局

全局的样式（app.wxss）与通用布局在小程序开发的时候，大多时候，页面的布局都是基本相同的。因此，页面布局也就形成了固定的套路。常见的布局及全局样式如下：

我就是我/ 2021年09月16日 05:40/ 0 赞/ 471 阅读

相关微信小程序尺寸单位rpx以及样式相关介绍

一.rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有75

短命女/ 2021年09月12日 06:32/ 0 赞/ 435 阅读

相关小程序学习三：小程序wxss样式基础

小程序wxss基础一、wxss和css的区别二、rpx解释三、rpx和px的单位换算四、样式导入五、全局样式六、局部样式

超、凢脫俗/ 2021年09月07日 06:19/ 0 赞/ 432 阅读

相关微信小程序全局函数设置全局样式

小程序 >开发 >指南 >小程序框架 >逻辑层 >模块化设置全局可获取的数据 1、在app.js文件中: App({

矫情吗；*/ 2021年07月24日 18:05/ 0 赞/ 699 阅读