开发微信小程序之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制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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
PHP 第二节 数据类型之数值型
2012/04/28 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python2与Python3的区别详解
2020/02/09 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python识别处理照片中的条形码
2020/11/16 Python
想学画画?python满足你!
2020/12/24 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
售后服务承诺书
2014/03/26 职场文书
公司会议策划方案
2014/05/17 职场文书
机械操作工岗位职责
2014/08/08 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
如何书写邀请函?
2019/06/24 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
python中super()函数的理解与基本使用
2021/08/30 Python