开发微信小程序之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 相关文章推荐
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
使用JavaScript破解web
2018/09/28 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
幼儿教师演讲稿
2014/05/06 职场文书
安全例会汇报材料
2014/08/23 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
化工见习报告范文
2014/10/31 职场文书
承诺书模板大全
2015/05/04 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
使用python绘制分组对比柱状图
2022/04/21 Python