对于rpx的理解和使用

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

新值 = 值*(设置宽度/750)

1，开发时如何使用

直接把预览的界面设置成750px，然后照着之前正常的px值去写代码不就好了嘛！！
因为是rpx，尺寸和屏幕的宽度相绑定，屏幕尺寸进行缩放，则元素的所有rpx都会进行等比例地缩放！
这就是rpx实现适配不同宽度屏幕的原理。
所以，开发者只要把预览的屏幕设定到750，然后进行开发就可以了！并不需要去换算啊啥的！这不是给自己添堵吗？有时间就好好练练口才，想想怎么和后端，产品，ui撕逼不好吗！

2，使用rpx的注意点–尽量不要rpx混和px进行布局

比如说上图中,如果swiper使用了默认的150px,而下面四个标签使用的rpx进行绝对定位，那么在每次屏幕宽度不一致的时候。就会发生，swiper的高度发生变化，但是四个标签的高度位置不变的情况，也就是发生错位的情况。
因为在项目跑起来之后，rpx是通过750px转换成对应的px作为单位的！

对于rpx的理解和使用相关推荐

vue面试题（day06）
文章目录前言请谈谈WXML与标准的html的异同? 请谈谈WXSS和CSS的异同? 请谈谈微信小程序主要目录和文件的作用? 请谈谈小程序的双向绑定和vue的异同? 简单描述下微信小程序的相关文件类 ...
11~13k(初/中级)前端面试看这篇就够了
一.HTML + CSS 1.常用实用技巧 01.定位: position:absolute/relative/fixed/static static:静态定位: absolute:绝对定位, 绝对定 ...
2020-12-09-商城，记录每天学了什么
2020-12-09 章节3.app.vue引入全局公共样式 1.引入样式库 uni.css //官方ui库在官方hello uni中有 animate.css //css动画库 https:/ ...
uni-app中理解，区分，使用rpx单位和px单位及样式字体的导入
uni-app中的rpx Tips: uni-app支持的通用css单位包括px,rpx px即屏幕像素 rpx 即响应式 px,是一种根据屏幕宽度自适应的动态单位. rpx 以 750 宽的屏幕为基 ...
rem适配的浏览器_[史上最全]UI相关尺寸单位详解 | px、pt、dp、sp、rem、vwvh、rpx、ppi、dpi、dppx...
先给进来看文章的你点个赞尺寸适配应该由开发同事负责处理,处理不好是他的问题,你有兴趣了解这些让人头疼的事,证明你是共产主义好社畜,还有工作量不饱和,Good for you~适配问题是影响设计复现的 ...
HTML5支持rpx,css小程序的元素尺寸单位px，rpx及rem
css小程序的元素尺寸单位px,rpx及rem的简明理解.0b7d08f 做小程序和做网页是不一样的.需要理解换算一下单位.fcb0b 0b7d08f rpxa741a29f 微信小程序单位,小程序规 ...
谈谈像素以及微信小程序的 rpx
谈谈像素以及微信小程序的 rpx 前言最近在负责有赞的某个业务的微信小程序开发,这是我第一次着手微信小程序的开发,这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Shee ...
微信小程序踩坑之旅（三）：不同机型布局适配问题（rpx，px，vh，vw）
rpx与px 官方文档的解释 rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素, ...
12_心理咨询_微信小程序项目实战_数据交互_深入理解小程序
前言我们实现静态页面,只需要稍微懂一点HTML/CSS即可或者零基础都可以,但是如果想要进行数据交互,需要对小程序有一定的理解: 小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开 ...

对于rpx的理解和使用

1，开发时如何使用

2，使用rpx的注意点–尽量不要rpx混和px进行布局

对于rpx的理解和使用相关推荐

最新文章

热门文章