微信小程序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] 举报，一经查实，本站将立刻删除。 相关推荐 微信小程序发布新版本提示用户更新 在做微信小程序新版本的时候，如何提醒用户更新？ 今天分享一个关于微信小程序发布新版本提示用户更新代码 微信小程序如何设置字体样式 本文小编为大家详细介绍“微信小程序如何设置字体样式”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序如何设置字体样式”文章能帮助大家解决疑惑... 微信小程序picker选择器获取值的方法有哪些 这篇文章主要介绍了微信小程序picker选择器获取值的方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序picker... 微信小程序选择器组件picker怎么使用 本篇内容介绍了“微信小程序选择器组件picker怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处... 在微信小程序中怎么使用three.js 本篇内容主要讲解“在微信小程序中怎么使用three.js”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“在微信小程... uni-app开发微信小程序之H5压缩上传图片的问题怎么解决 这篇文章主要讲解了“uni-app开发微信小程序之H5压缩上传图片的问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入... 利用微信小程序查询地理经纬位置的具体操作       大家熟悉微信小程序查询地理经纬位置吗?晓得微信小程序查询地理经纬位置的操作吗?下文就带来了微信小程序查询地理经纬位置的操作教程，一起来看看吧 微信小程序收款通知设置方法的简单操作       今日就快来学习本文中微信小程序收款通知设置方法的操作过程吧，相信在以后的使用中一定会得心应手的 wifi密码查看器官方版小程序的使用操作讲解       当前使用微信小程序类软件的朋友越来越来多，那么若想知道wifi密码查看器官方版小程序的使用，该如何操作的呢?接下来分享关于wifi密码查看器官方版小程序的使用的操作步骤。 微信手持弹幕玩法的操作流程       相信许多网友对微信都熟悉的，手机必装的一款应用，那大家知道在微信小程序里手持弹幕玩法吗?下文小编就带来了微信手持弹幕玩法的简单教程，有需要的朋友一起来看看吧 快速制作微信小程序方法的操作步骤       不少朋友都喜欢使用微信小程序软件，那么大家知道快速制作微信小程序方法的简单操作吗?若还不了解，就来学习学习制作微信小程序方法教程吧，10分钟就能搞定 使用微信小程序制作二维码表白语的简单操作       有些人在使用微信时，还不了解微信怎么制作二维码表白的操作，下面小编就讲解使用微信制作二维码表白的操作方法吧，单身朋友赶快Get起来吧 利用微信小程序玩斗地主游戏的具体操作       不少朋友都喜欢使用微信小程序，那么大家清楚微信小程序可以直接玩斗地主游戏的操作吗?若还不了解，就来学习学习利用微信小程序玩斗地主游戏教程吧! 微信小程序全屏倒计时的简单操作       现在用手机里小程序的人越来越多，各种生活小软件应有尽有，下面小编就给大家分享一波微信小程序，好看+好用+精致，希望给大家带来帮助。 微信好物圈的具体操作       微信想必大家都很熟悉，它是现在最大的社交软件，大家或许不知道微信小程序里有个好物圈，那么今天小编就带大家学习微信好物圈的具体操作，希望能够帮助到大家呢 利用微信小程序转换PDF文档的简单使用教程       大家知道如何利用微信小程序转换PDF文档吗?下文小编就带来了在利用微信小程序转换PDF文档的简单使用教程，一起来看看吧! 微信小程序换算工具的使用步骤       微信小程序现在是越来越受大家欢迎，现在很多朋友都喜欢使用微信小程里的换算工具.不过部份朋友还不清楚小程序里换算工具使用方法，今天小编要为大家分享一个微信超强换算工具一起来看看吧! 微信成语猜猜看进入的简单使用流程       想必刚刚入手微信小程序的朋友，还不太了解微信成语猜猜看怎么进入，小编今天就带来关于微信小程序成语猜猜看打开方法的操作步骤，感兴趣的小伙伴们一起学习一下吧! 修改微信小程序名称的详细操作       有些用户在使用微信小程序时，还不了解微信小程序如何修改用户名称，下面小编就讲解修改微信小程序的名称的操作方法，有需要的小伙伴一起来学习吧，详细流程奉上 百度智能小程序月活达2亿以上       当前互联网发展迅速，整个用户设备不断的在变化，生态也接连变化，所以可以这样说，智能小程序已经成为一个必然的选择。 热门文章 • 微信小程序发布新版本提示用户更新 • 微信小程序如何设置字体样式 • 微信小程序picker选择器获取值的方法有… • 微信小程序选择器组件picker怎么使用 • 在微信小程序中怎么使用three.js • uni-app开发微信小程序之H5压缩上传图片… • 利用微信小程序查询地理经纬位置的具体… • 微信小程序收款通知设置方法的简单操作 • wifi密码查看器官方版小程序的使用操作… • 微信手持弹幕玩法的操作流程 最新文章 • 微信小程序发布新版本提示用户更新 • 微信小程序如何设置字体样式 • 微信小程序picker选择器获取值的方法有… • 微信小程序选择器组件picker怎么使用 • 在微信小程序中怎么使用three.js • uni-app开发微信小程序之H5压缩上传图片… • 利用微信小程序查询地理经纬位置的具体… • 微信小程序收款通知设置方法的简单操作 • wifi密码查看器官方版小程序的使用操作… • 微信手持弹幕玩法的操作流程 热门标签更多 友情链接: 前端之家 ai导航 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！