微信小程序【浅提WXSS样式】
(一) 尺寸问题
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
其实和原来的 CSS 没差特别多,不过先说一个挺重要的点,就是微信小程序官方提供的一种,解决尺寸问题的方案 rpx
例如设计师给你的设计稿是px为单位的,但是如果你直接使用这样固定的写法,就会导致在不同的机型上,出现内容尺寸比例不一的现象,当然我们也可以使用百分比来解决这个问题,而今天我们简单说一说 rpx
(1) 存在的问题
首先我们,随便写一个 200px * 200px 的方框
view{
width: 200px;
height: 200px;
background-color: deeppink;
}
在不同的机型下,实际上大小可以说写死了,在其他机型下,很清晰就可以看到,右边的留白,发生了很大的变化
(下图为 750 * 550 自定义的)
(2) 尺寸单位
- 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 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况
知道了这些,接着看上面的问题,首先,1px=rpx*(750/设备屏幕宽度),因为原型图我们以iphone6为标准,所以公式就是1px=rpx*(750/375),所以1px=2rpx,这也对应了上面的表格,所以我们只需要将原来固定的 200px 修改一下,成为 400rpx,这样就会发现方框就会根据不同屏幕的尺寸来变化了
(3) 总结
使⽤步骤:
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth
- 在less⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可
(二) 引入样式
刚才,我们简单说了一下比例尺寸的问题,在同一个页面下的 样式文件,是不需要引入的,也就是说 例如 test 文件夹下的 test.wxml 中就可以自动匹配上 test.wxss 中的样式
但是,如果想自定义一些样式供多个页面使用,怎么做呢,例如我们在根目录下创建一个文件夹,在其中创建一个名为 commom.wxss 的样式文件,为了效果显著一些,把字体改一下样式
view{
color: red;
font-size: 30px;
}
我们在需要页面的 WXSS 中引入一下
注:路径只能写相对路径哈
@import"../../styles/common.wxss";
效果一下就显出来了
(三) 选择器
(1) 支持的选择器:
选择器 |
样例 |
样例描述 |
---|---|---|
.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 组件前边插入内容 |
注意:通配符 *
是不支持的,即下列代码是无效的
*{
margin:0;
padding:0;
box-sizing:border-box;
}
(2) 全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
(四) 原生小程序使用 less 的方法
原生的小程序是不支持使用 less 的,当然了,你可以选择直接写样式,如果想要使用 less 的话,可以在 vscode 中安装例如 Easy LESS
插件(此插件需要在 vscode 配置中加入)
"less.compile": {
"outExt": ".wxss"
},
在编写样式的地方,直接新建 less 文件,例如 test.less 编辑保存后,会生成对应的WXSS文件
- IronPython资料
- WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)
- encodeURIcomponent编码和ASP.NET之间编码转换
- WordPress免插件仅修改代码去掉评论/留言里的链接
- 阅读Ext 学习Javascript(一)Core/Ext.js
- 利用腾讯的ip地址库做ip地址定位
- WordPress登陆不了后台的原因及解决方法(登陆界面不断返回)
- select元素的options.add 与 insertbefore的区别
- 如何去理解 拓扑排序算法
- WordPress免插件仅代码实现文章归档(模板页面)I
- Bing Map App 开发 还没入门遇见错误无法继续
- 使用MongoDB的支持Linq 驱动NoRM
- Ext的组件模型印象
- 2018年预计仍将持续活跃走高的数字货币都有哪些?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP调用微博接口实现微博登录的办法示例
- thinkphp3.2同时连接两个数据库的简单方法
- php实现微信企业付款到个人零钱功能
- php中对象引用和复制实例分析
- php中上传文件的的解决方案
- PHP实现与java 通信的插件使用教程
- thinkPHP5框架接口写法简单示例
- php实现数组重复数字统计实例
- php提取微信账单的有效信息
- php使用pecl方式安装扩展操作示例
- RSA实现JS前端加密与PHP后端解密功能示例
- Laravel源码解析之路由的使用和示例详解
- Linux中crontab输出重定向不生效问题的解决办法
- PHP swoole和redis异步任务实现方法分析
- thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析