微信小程序新手入门教程四:样式设计

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,决定了 WXML 的组件会怎么显示。

WXSS 具有 CSS 大部分特性,同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性主要包括尺寸单位样式导入

一 尺寸单位

首先我们来学习一下尺寸单位这个新特性。在CSS中,我们通常使用的单位是px,但在WXSS中,单位是rpx。rpx(responsive pixel)可以根据屏幕宽度进行自适应,也就是说它的大小并不是固定的,会根据屏幕大小的改变而改变。

我们通过一个案例来认识一下rpx与px的区别。例如这段代码,设置黄色区域宽高均为定值100px,在手机型号为iPhone5(320 * 568)时,显示为下图样式:

还是这段代码,但是我们把机型改成iPad(768 * 1024),可以看出,黄色区域的大小并没有改变。

接下来我们修改代码,把黄色区域的宽高改为100rpx,再来看结果。当机型是iPhone5时,可以很明显的看出,黄色区域变小了。

当机型为iPad时,黄色区域也随着变大。

试想一下,当我们在开发微信小程序时,我们是希望元素的大小固定呢,还是随着不同用户设备的大小改变呢?自然是后者。这就是rpx存在的意义。

再啰嗦一下,假设黄色区域是一个轮播图,需要平铺整个页面的上半部分,如果使用rpx,就是这样的:

无论在什么设备上,我们都能实现横向的平铺。那么,如何界定"平铺"的大小呢?微信小程序规定**屏幕宽为750rpx,**rpx与px之间的换算关系取决于屏幕的宽度。

例如,在屏幕宽度刚好为750px的设备上,那么换算关系就是:

750rpx = 750px ==> 1rpx = 1px

那么如果屏幕宽度为375px呢(例如iPhone6),代入上面的表达式:

750rpx = 375px ==> 2rpx = 1px

总结一下,rpx与px之间的换算关系为

rpx换算px :屏幕宽度/750

px换算rpx:750/屏幕宽度

除了我们人工进行换算,还可以直接使用calc属性来表达:

css 复制代码
view {
    width:calc(750rpx * 100 / 375);
}

需要注意的一点是,750和rpx之间不能有空格。

calc() 函数在CSS中也可以使用,其参数是一个表达式,用表达式的结果作为值。

样式导入

我们知道,在CSS中,样式引入有行内样式 、 外部样式 、 内部样式三种方式,而在wxss中,则简单很多。

方式一:行内样式

微信小程序组件支持使用style属性来控制组件的样式,用法与CSS一致,不再赘述。

方式二:导入外联样式表

在wxss中使用**@import语句** 可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

css 复制代码
@import "common.wxss";

方式三:外部样式

也就是我们通常使用的在wxss中直接写语句了,与CSS不同的是,我们无须在wxml文件中使用link标签引入样式。

三 选择器

小程序不支持通配符*!

小程序不支持通配符*!

小程序不支持通配符*!

也就是说,我们在CSS中经常写的:

css 复制代码
* {
    padding:0;
    margin:0;
}

这段代码在wxss中是无效的。

其他选择器与CSS均相同,具体如下:

四 外部样式与内部样式

我们之前在微信小程序新手入门教程一:零基础上手_自学微信小程序教程-CSDN博客中学习过,定义在app.wxss 中的样式为全局样式 ,作用于所有页面,而在pages文件夹下的xx.wxss中的样式,之作用于对应的页面,也就是局部样式 。需要说明的是,局部样式优先级高于全局样式,也就是说局部样式中的内容会盖 app.wxss 中相同的选择器。


今天我们学习的内容比较简单,基本与我们熟悉的CSS语法一样,只有一点点新知识。接下来我们学习重头戏,也是自己动手写小程序的最后一步:组件。学习完组件的内容,我们就可以设计自己的小程序了!

相关推荐
Mintopia3 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼22 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~24 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务26 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛27 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑30 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭36 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿41 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
racerun1 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序