微信小程序_4,WXSS模板样式

1.什么是WXSS:

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

2.WXSS和CSS的关系:

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

rpx尺寸单位
@import样式导入

rpx的实现原理:

rpx的实现原理非常简单,鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有的设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)

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

小程序在不同蛇摆上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配

＞rpx和px之间的单位换算:

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

1rpx=0.5px=1物理像素

设备	rpx换算px(屏幕宽度750)	px换算rpx(750/屏幕宽度)
iphone5	1rpx=0.42px	1px=2rpx
iphone6	1rpx=0.5px	1px=2rpx
iphone6Plus	1rpx=0.552px	1px=1.81rpx

官方建议开发微信小程序时,设计师可以用iphone6作为视觉稿的标准

@import的语法格式:

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

test.wxss:

text{color: rebeccapurple;
}

导入:

/* pages/usekey/usekey.wxss */
@import './text.wxss';

运行:

确实变色了

全局样式:

定义在app.wxss中的样式为全局样式,作用于每一个页面:
在app.wxss中添加:

text{font-family: serif;font-weight: bolder;
}

运行:

局部样式:

在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面

注意:

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

微信小程序_4,WXSS模板样式相关推荐

【微信小程序】WXSS模板样式 —— 页面配置
1.1.什么是样式导入使用WXSS提供的 @import 语法,可以导入外联的样式表. 1.2.WXSS 和 CSS 的关系 WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改 ...
【微信小程序】WXSS模板样式
✅作者简介:CSDN内容合伙人.阿里云专家博主.51CTO专家博主
【微信小程序】WXSS 模板样式
目录
微信小程序学习day02-WXSS 模板样式
目录 WXSS 模板样式-介绍: 1. 什么是 WXSS: 2. WXSS 和 CSS 的关系: WXSS 模板样式 - rpx : 2. rpx 的实现原理: 3. rpx 与 px 之间的单位换算 ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序数据绑定与模板语法
微信小程序数据与模板配置总述: 对应的语法格式与vue的语法格式类似 wxml数据绑定 WXML 模板语法 - 数据绑定.数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据在 ...
清除微信小程序button的默认样式
清除微信小程序button的默认样式文章目录清除微信小程序button的默认样式总结最近在微信小程序的开发过程中,经常的使用button按钮,但是我们要怎么样去除它们的默认样式呢? 一.去除b ...
*通配符与微信小程序的WXSS
在编写前端样式的时候,很多人都喜欢先用通配符规定一些样式但是,在微信小程序的wxss中,没有 * 通配符 ,所以只能用笨方法 , 把每个标签选上再设置 .
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...

微信小程序_4,WXSS模板样式

微信小程序_4,WXSS模板样式相关推荐

最新文章

热门文章