微信小程序: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. 当局部样式的权重大于或者等于全局样式的权重时候,才会覆盖全局样式
相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220693 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧