文档章节

尺寸单位rpx和px的区别

甄佰匠人
 甄佰匠人
发布于 2017/07/05 13:07
字数 214
阅读 178
收藏 0

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

 

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

注:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

 

建议:设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出来的尺寸是多少px就是多少rpx,至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算。

© 著作权归作者所有

甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
微信小程序 尺寸单位rpx与px,rem相互转换

1. rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = ...

qq_31383345
2016/10/14
0
0
基于px2rpx-loader,探讨一下loader的封装思想

本文以px2rpx-loader的源码为学习对象,了解其工作机制以及loader封装的思想。 1.前言 最近在了解mpvue框架的时候,对于其能够实现一套代码兼容web和微信小程序(以下简称小程序)的能力十分...

知道创宇云安全
2018/07/18
0
0
移动端自适应布局&微信小程序rpx

rpx是微信小程序推出的一个新单位,通过rpx可以让我们的页面根据屏幕宽度进行自适应,这一举措解决了一直令前端头疼的屏幕适配问题。 而在rpx出现之前,web页面的自适应布局已经有前人总结了...

小草先森
2018/06/16
0
0
编写第一个小程序页面

笔记内容:开发第一个小程序页面笔记日期:2018-01-04 自动生成的小程序文件结构简介 新建一个项目: 创建完项目后,可以看到左边有个手机窗口般的界面,这是效果的展示页面: 还可以查看启动...

ZeroOne01
2018/01/05
0
0
微信小程序开发—小程序框架详解(二)

我参加CSDN博客之星评选啦,感谢大家前往投票支持! 投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search 上一节讲了微信小程序的目录结构及各个文件的作用,主要介绍了...

anda0109
2016/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
31分钟前
1
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
41分钟前
1
0
centos7修改命令行或图形界面启动模式

1.systemctl get-default命令获取当前模式 2.systemctl set-default graphical.target 修改启动模式(修改为图形界面,要是修改为命令行就multi-user.target) 2.systemctl set-default multi-...

大圣39
45分钟前
2
0
vue预渲染

prerender-spa-plugin 安装prerender-spa-plugin (插件使用见npm官网)[https://www.npmjs.com/package/prerender-spa-plugin] npm install prerender-spa-plugin --save-dev 配置prerender-s......

莫西摩西
今天
1
0
Command模式

https://www.cnblogs.com/devinzhang/archive/2012/01/06/2315235.html

南桥北木
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部