【小程序语法】详解 WXSS

简介: 【小程序语法】详解 WXSS

小程序的样式写法


小程序的样式写法跟我们熟悉的CSS一样,也是有三种写法:行内样式、页面样式、全局样式,并且这三种写法都可以作用于页面组件。


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

优先级依次是:行内样式 > 页面样式 > 全局样式


全局样式与局部样式:


定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

微信图片_20221013131844.png

WXSS支持的选择器

微信图片_20221013132333.png

WXSS优先级


从左往右优先级一次减少。

一般非特殊场景需要,不推荐随便加 !importan

微信图片_20221013132420.png

wxss的扩展 - 尺寸单位


rpx(responsive pixel): 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

微信图片_20221013132506.png

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。


微信图片_20221013132611.png

相关文章
|
5月前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
5月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
5月前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
5月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
5月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
536 0
|
2月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
85 0
微信小程序开发必备前置知识:基本代码构成与语法
|
5月前
|
JavaScript 小程序
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
|
5月前
|
JSON 小程序 搜索推荐
【微信小程序】-- 模板语法与配置的总结(二十一)
【微信小程序】-- 模板语法与配置的总结(二十一)
|
5月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
5月前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)