微信小程序:8.WXSS

WXSS和CSS的关系

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

与CSS相比,WXSS扩展的特性有:

  • rpx尺寸单位
  • @imprt样式导入

rpx尺寸单位

rpx是微信小程序中独有的,用来解决屏幕适配的尺寸单位。

rpx实现原理

rpx,根据不同设备的屏幕大小进行适配,为了实现屏幕的自动适配,rpx把所有的设备屏幕,在宽度上把整个屏幕分为750份

  • 在小设备上,1px所代表的宽度较小
  • 在大设备上,1rpx代表的宽度较大

小程序不同设备运行的时候rpx会根据设备进行换算渲染,从而实现屏幕的适配

rpx和px之间的单位换算

在iphone6上,屏幕宽度为375px,共有750个物理像素,等分为750rpx。

样式导入

@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束

复制代码
.small-p{
  padding:5px;
}

app.wxss

复制代码
@import "common.wxss"
.middle-p{
padding:15px
}

全局样式

定义在app.wxss中的样式是全局样式,样式会应用在小程序中每一个页面

局部样式

wxss适用于当前页面样式

注意:

  1. 当局部样式和全局样式发生冲突的时候,根据就近原则,局部样式会覆盖全局样式
  2. 当局部样式的权重大于或者等于全局样式的权重时候,才会覆盖全局样式
相关推荐
拼图20915 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
m0_7401904616 小时前
小程序部分pai
小程序
wocwin16 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
2501_9159184119 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me1 天前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_23332 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷2 天前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921432 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview