开发微信小程序之WXSS样式教程


Posted in HTML / CSS onApril 18, 2022

WXSS官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

1. WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

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

尺寸单位

样式导入

1.1. 尺寸单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

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

注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

我们可以共用一个,可以3p甚至np,想想都觉和刺激

1.2. 样式导入

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

示例代码:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

1.3. 内联样式

在里面更有感觉。。。?

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

<view style="color:{{color}};" />

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

<view class="normal_view" />

1.4. 选择器

目前支持的选择器有:

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

1.5. 全局样式与局部样式

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

以上就是微信小程序WXSS样式文件教程的详细内容!

HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 #HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 #HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
HTML常用标签超详细整理
Mar 19 #HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 #HTML / CSS
You might like
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python快排算法详解
2019/03/04 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
实例代码讲解Python 线程池
2020/08/24 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
网络编辑岗位职责
2014/03/18 职场文书
创先争优一句话承诺
2014/05/29 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
基层工作经验证明样本
2014/11/16 职场文书
植物园观后感
2015/06/11 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
CSS基础详解
2021/10/16 HTML / CSS
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript