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

叁歲伎倆 2024-03-30 11:29 76阅读 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 条评论，76人围观）

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

相关阅读

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

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

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

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

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

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

相关【小程序】使用WXSS编写样式介绍以及与CSS的区别

文章目录 WXSS编写样式小程序的样式写法 WXSS支持的选择器 WXSS扩展-尺寸单位

痛定思痛。/ 2023年09月28日 20:42/ 0 赞/ 2 阅读

相关 uni-app 通用尺寸单位rpx及样式

官方文档： rpx 即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。关于rpx说明设计师在提供设计图时，一般只提

浅浅的花香味﹌/ 2023年06月25日 10:23/ 0 赞/ 34 阅读

相关微信小程序（WXSS样式文件）

课程大纲（1）WXSS简介（2）分类（3）尺寸单位rpx （4）样式导入@import （5）style内联样式（6）WXSS

桃扇骨/ 2023年06月15日 09:47/ 0 赞/ 24 阅读

相关微信小程序（WXSS样式文件）

【本节大纲】（1）WXSS简介（2）分类（3）尺寸单位rpx （4）样式导入@import （5）style内联样式（6）WXSS选择器（

梦里梦外;/ 2023年06月15日 09:44/ 0 赞/ 27 阅读

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

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

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

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

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

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

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

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

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

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

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

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