rpx是微信小程序WXSS的尺寸单位。介绍rpx前，先要介绍WXSS。
WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定小程序页面WXML的组件应该怎么显示。
为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发小程序，微信开发者对 CSS 进行了扩充以及修改。
与 CSS 相比WXSS扩展的特性有：
其中，rpx就是尺寸单位。
建议 ： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意 ： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
参考资料： 微信小程序开发文档
我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。
所以我们可以使用变量来优化。
在html, css里面，它原始的定义方式及使用方法是这样的
其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。
使用的时候，用var()函数进行调用。
注意：约定变量名须以两个连字符'--'开头
在小程序中，用法基本也是一样的：
我们在wxss页面中进行定义
注意，page选择器是选中整个页面，前面是没有'.'号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。
你也可以在wxml里面直接使用！
这个wxss变量，既可以在每个页面mypage.wxss里面的page里声明，
，就能在所有页面里使用。
mode 属性：默认值：scaleToFill —- 不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签
aspectFit —- 保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来
aspectFill —– 保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
top —- 不缩放图片，只显示图片的顶部区域
bottom —- 不缩放图片，只显示图片的底部区域
center —- 不缩放图片，只显示图片的中间区域
left —- 不缩放图片,只显示图片的左边区域
right —– 不缩放图片，只显示图片的右边区域
top left —- 不缩放图片,只显示图片的左上边区域
top right —- 不缩放图片,只显示图片的右上边区域
bottom left —- 不缩放图片,只显示图片的左下边区域
bottom right —- 不缩放图片,只显示图片的右下边区域
4.隐藏NavigationBar
5.VM11106:1 Do not have login handler in current page: pages/login/login. Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into app.json
解决方案：
2.调整app.json中Pages里面的页面注册顺序 ；
3.检查wxml中bindtap是否在js里面将方法创建。
6.switch样式大小调整
大家都知道微信官方提供的switch 能改变color 但是改变大小 常用的width height 不起作用
但是可以这样修改
7.input 不沾满屏幕右侧有留白
使用flex布局的时候明明 input style 设置了flex＝1 的属性 可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡， 不知道是不是一个bug，
解决方案： 在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字
————————————————
1.display取值
2.float(取值：left，right，none，inherit。)
3.clear：该属性指出不允许有浮动对象的边。（取值：left，right，both，none.）
4.visibility：是否显示对象(取值：visible，hidden，collapse。)
5.overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)
其他属性：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）