微信小程序 教程之WXSS


Posted in Javascript onOctober 18, 2016

系列文章:

WXSS

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

WXSS用来决定WXML的组件应该怎么显示。

为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序,我们对CSS进行了扩充以及修改。

与css相比我们扩展的特性有:

尺寸单位
样式导入

尺寸单位

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.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

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

样式导入

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

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

内联样式

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

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

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

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

<view class="normal_view" />

选择器

目前支持的选择器有:

选择器 样例 样例描述
.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组件前边插入内容

全局样式与局部样式

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
javascript中获取选中对象的类型
Apr 02 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
微信小程序 教程之引用
Oct 18 #Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 #Javascript
微信小程序 教程之事件
Oct 18 #Javascript
微信小程序 教程之模板
Oct 18 #Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
You might like
UCenter Home二次开发指南
2009/05/28 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python之生成多层json结构的实现
2020/02/27 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
pytorch简介
2020/11/11 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
判断单链表中是否存在环
2012/07/16 面试题
汉语专业毕业生自荐信
2014/07/06 职场文书
文明好少年事迹材料
2014/08/19 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
详解pytorch创建tensor函数
2022/03/22 Python
mysql 获取相邻数据项
2022/05/11 MySQL