微信小程序 教程之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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python实现括号匹配的思路详解
2018/08/23 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
公司门卫管理制度
2014/02/01 职场文书
晚归检讨书
2014/02/19 职场文书
医院合作协议书
2014/08/19 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
家长高考寄语
2015/02/27 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书