为什么小程序能适配不同机型？因为微信做了这个
我们都知道，小程序是一个跨系统的平台。这就意味着，小程序会在不同的设备上运行，但不同设备的分辨率会有差异。
在小程序中，如何在分辨率不同的设备上保证视觉元素的正常显示？这就需要名为 rpx 的动态尺寸单位。
本期，知晓程序（微信号 zxcx0101）为大家带来小程序 rpx 单位全解析，希望能够帮助你解决有关 rpx 的一切疑问。
为什么需要动态单位和 rpx？
在显示屏上，每一个画面都是由无数的点阵形成的。这个点阵中，每一个点叫做像素，就是 pixel（缩写为 px）。
上面的那句话，对于很多人来说都是常识。
但是，随着 Retina 屏幕（即「视网膜屏」）的推出和高分屏的普及，1 px 所能代表的尺寸并非是一成不变的。
对于跨平台、跨设备的应用来说，单纯使用 px 并不能满足需要。因为，这很难保证小程序的元素，能在不同设备上正常显示——同样 px 尺寸的元素，在高分屏上显示会明显要比在低分屏显得更小。
因此，我们需要一个动态的长度单位。这个单位通过对不同屏幕的分辨率进行调整和适配，保证相同元素在不同屏幕上的展示是正常的。
苹果和 Google 对此都有相应的措施：
由于苹果对高分屏的优化良好，所以在 iOS 上，代码中的 1px 所代表的实际像素数会根据不同设备动态调整，开发者不需要进行二次换算。
由于 Android 设备碎片化严重，Google 不得不建立了一个新的名叫「density-independent pixel（密度无关像素，缩写为 dp）」的尺寸单位，以适应不同分辨率屏幕的尺寸换算。
微信也为小程序提供了一个动态单位解决方案：它就是 responsive pixel（动态像素），简称 rpx。
Pixel 与 rpx、dp 如何换算呢？
了解动态单位是怎么来的以后，我们下一步就该学习如何在 px 和 rpx、dp 之间进行换算了。
动态单位与 px 换算的基本概念是：选择一个分辨率作为基准，在基准分辨率中，一个像素点显示有多长，在其他屏幕上会显示同样长度。
例如，dp 与 px 换算公式是：`dp = px * (目标设备 dpi 分辨率 / 160)`。
但微信小程序的 rpx 换算方式，会与其他动态单位的换算方法有些出入。微信官方提供的换算方式更「傻瓜」一些：`rpx = px * (目标设备宽 px 值 / 750)`。
举个例子：
目标设备的宽度如果是 375px，按照 750rpx 进行换算，则等于 1rpx = 0.5px
目标设备的宽度如果是 1125px，换算后 1rpx = 1.5px
想想是不是有些不太对劲？没错，如果将微信小程序放到平板电脑上运行，屏幕的宽度 px 值有可能会变化（横竖屏、分屏模式等等）。这时候，再以宽度为基准，就会出现元素显示不正确的问题。
从这一点可以看出，微信团队目前并不希望将小程序扩展到手机以外的设备中。因此，开发者暂时可以专注于提高小程序在手机上的体验，无需担心多尺寸屏幕带来的适配问题。
那能不能直接让 rpx 和 dp 进行互换呢？当然不能！
dp 是以屏幕分辨率为基准的动态单位，而 rpx 是以长度为基准的动态单位，两者是不能直接进行互换的。除非微信官方为 rpx 设定的是分辨率基准而非长度基准。
设计师该怎么做？
由于微信使用了动态单位，设计稿的尺寸单位推荐使用 dp 作为设计单位。
那么问题来了，如果要改用 dp 单位，以什么尺寸的屏幕作为设计稿标准会比较合适呢？
在微信官方的文档中，我们看到这样一句话：
在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
开发微信小程序时设计师可以用 iPhone 6 作为视觉稿的标准。
也就是说，设计师在设计小程序时，可以这样做：
直接以 iPhone 6 的屏幕尺寸（375×667）用作视觉稿尺寸，1 px = 0.5 rpx
以 1 px = 1 rpx 的标准，将设计稿尺寸设定为 750×1334
在将设计稿转交给程序员之前，设计师需要清楚地描述设计稿尺寸和单位换算标准等，以便程序员快速实现界面效果。
如果想让你的小程序，在不同尺寸的机型上都能够完美显示，那就好好消化这篇文章吧。
本文由知晓程序原创出品，关注微信号 zxcx0101，回复「电商」，让爱范儿开发者手把手教你开发电商类小程序。
快速关注知晓程序↓↓↓
知晓程序（微信号 zxcx0101）是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯（消息、观点、指南、活动）和服务，在这里你能了解到关于小程序的一切。
有好的产品或者项目希望我们报道，猛戳这里
96文章总数
全新爱范儿 App 现已适配
Android 及 iPhone
使用微信扫码关注爱范儿微信公众号
关注爱范儿微信号，连接热爱，关注这个时代最好的产品。
想让你的手机好用到哭？关注这个号就够了。
关注玩物志微信号，就是让你乱花钱。微信小程序 动态的设置图片的高度和宽度详解及实例代码
作者：预见才能遇见
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序 动态的设置图片的高度和宽度详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
在小程序布局中，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片布局的高度和宽度和原始图片的高度和宽度相等。
1.图片等比例缩放工具
class Util{
* 按照显示图片的宽等比例缩放得到显示图片的高
* @params originalWidth 原始图片的宽
* @params originalHeight 原始图片的高
* @params imageWidth
显示图片的宽，如果不传就使用屏幕的宽
* 返回图片的宽高对象
static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){
let imageSize = {};
if(imageWidth){
imageSize.imageWidth = imageW
imageSize.imageHeight = (imageWidth * originalHeight) / originalW
}else{//如果没有传imageWidth,使用屏幕的宽
wx.getSystemInfo({
success: function (res) {
imageWidth = res.windowW
imageSize.imageWidth = imageW
imageSize.imageHeight = (imageWidth * originalHeight) / originalW
return imageS
* 按照显示图片的高等比例缩放得到显示图片的宽
* @params originalWidth 原始图片的宽
* @params originalHeight 原始图片的高
* @params imageHeight
显示图片的高，如果不传就使用屏幕的高
* 返回图片的宽高对象
static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){
let imageSize = {};
if(imageHeight){
imageSize.imageWidth = (imageHeight *originalWidth) / originalH
imageSize.imageHeight = imageH
}else{//如果没有传imageHeight,使用屏幕的高
wx.getSystemInfo({
success: function (res) {
imageHeight = res.windowH
imageSize.imageWidth = (imageHeight *originalWidth) / originalH
imageSize.imageHeight = imageH
return imageS
export default U
2.使用image组件加载图片，通过bindload动态的获取图片的高度和宽度，动态的设置图片的高度和宽度&& index.wxml& （../pro.png是本地图片）
&image bindload="imageLoad" style="width:{{imageWidth}};height:{{imageHeight}}" src="../pro.png"/&
import Util from '../common/Util';
imageWidth:0,
imageHeight:0
imageLoad: function (e) {
//获取图片的原始宽度和高度
let originalWidth = e.detail.
let originalHeight = e.detail.
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);
let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);
this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信小程序尺寸单位rpx和样式使用详解_Android开发_动态网站制作指南
微信小程序尺寸单位rpx和样式使用详解
来源：人气：205
转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：http://blog.csdn.net/pcaxb/article/details/
微信小程序尺寸单位rpx和样式使用详解
1.尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 hone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
2.样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
@import &common.wxss&;
@import &temp/loadBottomTemp/loadBottomTemp.wxss&;
3.内联样式
框架上支持使用 style、class 属性来控制组件的样式。
(1)style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
//动态样式
&view style=&color:{{color}};& /&
style=&width:{{imageWidth}}height:{{imageHeight}}rpx&;
//静态样式
style=&color: #1083E5;font-size: 48font-weight:&
(2)class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
&view class=&normal_view& /&
class=&container-row buydes-center-des-select&
目前支持的选择器有：
5.全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
微信小程序尺寸单位rpx和样式使用详解
博客地址：http://blog.csdn.net/pcaxb/article/details/
优质网站模板微信小程序 rpx 尺寸单位详细介绍
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序 rpx尺寸单位以及样式详细介绍的相关资料,有效的帮助大家开发微信小程序，避免手机尺寸问题，需要的朋友可以参考下
微信小程序最近火了，大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢，面对不同的手机屏幕，微信
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应,
微信小程序尺寸单位rpx以及样式
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0。
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为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尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
感谢大家阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应 - 追着太阳晒
微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应 - 追着太阳晒
发布时间： 15:55:28
编辑：www.fx114.net
本篇文章主要介绍了"微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应 - 追着太阳晒 "，主要涉及到微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应 - 追着太阳晒 方面的内容，对于微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应 - 追着太阳晒 感兴趣的同学可以参考一下。
原文：http://www./portal.php?mod=view&aid=360早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记.老规矩,先上图.1.图片高宽比小于屏幕高宽比2.图片高宽比大于屏幕高宽比3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放.上代码:1.index.wxml&!--index.wxml--&&!--图片宽大于屏幕宽--&&image style="width: {{imagewidth}} height: {{imageheight}}" src="{{imagefirstsrc}}" bindload="imageLoad"&&/image&&!--图片高大于屏幕高--&&!--&image style="width: {{imagewidth}} height: {{imageheight}}" src="{{imagesecondsrc}}" bindload="imageLoad"&&/image&--&&!--图片宽高大于屏幕宽高--&&!--&image style="width: {{imagewidth}} height: {{imageheight}}" src="{{imagethirdsrc}}" bindload="imageLoad"&&/image&--&2.index.js//index.js //获取应用实例var imageUtil = require('../../utils/util.js');var app = getApp()Page({ data: { imagefirstsrc: '/back_pic/00/03/85/bbe2d.png',//图片链接 imagesecondsrc: '/back_pic/04/07/63/ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接 imagethirdsrc:'/ent/pics/hv1/13/71/43.jpg', imagewidth: 0,//缩放后的宽 imageheight: 0,//缩放后的高 }, onLoad: function () { }, imageLoad: function (e) { var imageSize = imageUtil.imageUtil(e) this.setData({ imagewidth: imageSize.imageWidth, imageheight: imageSize.imageHeight
}) }}) 3.util.js//util.js function imageUtil(e) { var imageSize = {}; var originalWidth = e.detail.width;//图片原始宽 var originalHeight = e.detail.height;//图片原始高 var originalScale = originalHeight/originalWidth;//图片高宽比 console.log('originalWidth: ' + originalWidth) console.log('originalHeight: ' + originalHeight) //获取屏幕宽高 wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; var windowHeight = res.windowHeight; var windowscale = windowHeight/windowWidth;//屏幕高宽比 console.log('windowWidth: ' + windowWidth) console.log('windowHeight: ' + windowHeight) if(originalScale & windowscale){//图片高宽比小于屏幕高宽比 //图片缩放后的宽为屏幕宽 imageSize.imageWidth = windowWidth; imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; }else{//图片高宽比大于屏幕高宽比 //图片缩放后的高为屏幕高 imageSize.imageHeight = windowHeight; imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; } } }) console.log('缩放后的宽: ' + imageSize.imageWidth) console.log('缩放后的高: ' + imageSize.imageHeight) return imageSize;}module.exports = { imageUtil: imageUtil }
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：