微信小程序rpx尺寸单位以及样式使用介绍

这篇文章主要介绍了微信小程序 rpx尺寸单位以及样式详细介绍的相关资料,有效的帮助大家开发微信小程序，避免手机尺寸问题，需要的朋友可以参考下

微信小程序尺寸单位

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;" class="firstRow">Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">

Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px rgb(221, 221, 221); border-left: 0px; background: 0px 0px rgb(249, 249, 249); vertical-align: baseline; text-align: center;">设备	Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px rgb(221, 221, 221); border-left: 0px; background: 0px 0px rgb(249, 249, 249); vertical-align: baseline; text-align: center;">rpx换算px (屏幕宽度/750)	Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px rgb(221, 221, 221); border-left: 0px; background: 0px 0px rgb(249, 249, 249); vertical-align: baseline; text-align: center;">px换算rpx (750/屏幕宽度)
Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">iPhone5Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">1rpx = 0.42pxBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">1px = 2.34rpxBox-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">	Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">iPhone6Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">1rpx = 0.5pxBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">1px = 2rpxBox-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">	Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">iPhone6sBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">1rpx = 0.552pxBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline; word-break: break-all;">1px = 1.81rpx微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx  注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算 如何导入小程序的样式 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。 示例代码： rush:css;toolbar:false">/** common.wxss **/ .small-p  { padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p  { padding:15px; } 小程序内联样式介绍 框架组件上支持使用 style、class 属性来控制组件的样式。 style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 rush:html;toolbar:false"> class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 rush:html;toolbar:false;"> 微信小程序css选择器 微信小程序目前支持的选择器有： Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;" class="firstRow">Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;">Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;"> Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px rgb(221, 221, 221); border-left: 0px; background: 0px 0px rgb(249, 249, 249); vertical-align: baseline; text-align: center;">选择器 Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px rgb(221, 221, 221); border-left: 0px; background: 0px 0px rgb(249, 249, 249); vertical-align: baseline; text-align: center;">样例 Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px rgb(221, 221, 221); border-left: 0px; background: 0px 0px rgb(249, 249, 249); vertical-align: baseline; text-align: center;">样例描述 Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">.classBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">.introBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">选择所有拥有 class="intro" 的组件Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;"> Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">#idBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">#firstnameBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">选择拥有 id="firstname" 的组件Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;"> Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">elementBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">viewBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">选择所有 view 组件Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;"> Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">element, elementBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">view checkBoxBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">选择所有文档的 view 组件和所有的 checkBox 组件Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;"> Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">::afterBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">view::afterBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">在 view 组件后边插入内容Box-sizing: border-Box; margin: 0px; padding: 0px; outline: 0px; border: 0px; background: 0px 0px; vertical-align: baseline;"> Box-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">::beforeBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline;">view::beforeBox-sizing: border-Box; margin: 0px; padding: 6px 8px; outline: 0px; border-top: 0px; border-left: 0px; background: 0px 0px; vertical-align: baseline; word-break: break-all;">在 view 组件前边插入内容小程序的全局样式与局部样式 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。 相关推荐 开发微信小程序的用户授权登录功能 开发微信小程序的用户授权登录功能 小程序开发页面如何实现跳转？ 小程序开发页面如何实现跳转？ 浅谈小程序开发中蓝牙连接错误分析及解决方法 浅谈小程序开发中蓝牙连接错误分析及解决方法 什么是小程序？它有哪些功能？ 什么是小程序？它有哪些功能？ 如何配置小程序开发项目结构？（教程） 如何配置小程序开发项目结构？（教程） 怎么把自己的店加入小程序 怎么把自己的店加入小程序 微信小程序怎么实现购物车功能？（方法介绍） 微信小程序怎么实现购物车功能？（方法介绍） 小程序使用函数节流解决页面多次跳转问题 小程序使用函数节流解决页面多次跳转问题 小程序中下拉刷新页面的功能怎么实现？ 小程序中下拉刷新页面的功能怎么实现？ 小程序生成参数二维码的方法介绍 小程序生成参数二维码的方法介绍 小程序开发中使用事件监听器的方法介绍 小程序开发中使用事件监听器的方法介绍 开发小程序需要掌握哪些技术 开发小程序需要掌握哪些技术 微信小程序无法获取定位怎么办 微信小程序无法获取定位怎么办 小程序如何通过watch和computed检测数据 小程序如何通过watch和computed检测数据 谈谈小程序开发中一些常见错误和排除方法 谈谈小程序开发中一些常见错误和排除方法 小程序介绍一般写什么内容 小程序介绍一般写什么内容 小程序API可以实现什么功能？ 小程序API可以实现什么功能？ 小程序中如何管理session？ 小程序中如何管理session？ 小程序的21个新功能 小程序的21个新功能 小程序如何实现分页加载数据功能？ 小程序如何实现分页加载数据功能？ 热门文章 • 开发微信小程序的用户授权登录功能 • 小程序开发页面如何实现跳转？ • 浅谈小程序开发中蓝牙连接错误分析及解… • 什么是小程序？它有哪些功能？ • 如何配置小程序开发项目结构？（教程） • 怎么把自己的店加入小程序 • 微信小程序怎么实现购物车功能？（方法… • 小程序使用函数节流解决页面多次跳转问… • 小程序中下拉刷新页面的功能怎么实现？ • 小程序生成参数二维码的方法介绍 最新文章 • 开发微信小程序的用户授权登录功能 • 小程序开发页面如何实现跳转？ • 浅谈小程序开发中蓝牙连接错误分析及解… • 什么是小程序？它有哪些功能？ • 如何配置小程序开发项目结构？（教程） • 怎么把自己的店加入小程序 • 微信小程序怎么实现购物车功能？（方法… • 小程序使用函数节流解决页面多次跳转问… • 小程序中下拉刷新页面的功能怎么实现？ • 小程序生成参数二维码的方法介绍 热门标签更多 友情链接: 前端之家 ai导航 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！