什么是反px?- 了解前端开发中的布局单位 什么是反px

摘要:在前端开发中,css的单位有很多种,其中像em、px、rem、vw、vh等单位相信大家都已经很熟悉了 。但是近年来,开发者们也开始逐渐关注另一种新型的单位 —— 反px 。那么反px到底是什么,又有什么特点呢?
反px的定义【什么是反px?- 了解前端开发中的布局单位 什么是反px】首先,我们应该知道“rem”的全称是 “root em”,即“根元素的 em”,而“反px”可以理解为“根元素的 px” 。
换句话来说,如果我们定义 html 元素的字体大小为 16px,那么 root mobile html 将被视为 16rpx 。这样一来,我们使用此单位可以根据根节点字体大小的变化自适应页面布局,具有对设备适应性、字号变化的灵活性,解决了前端开发中的一些难题 。

什么是反px?- 了解前端开发中的布局单位 什么是反px


反px的优点相较于其它常用单位,反px有以下的几个明显的优点:
1、自适应:使用 rpx 定义的元素,在不同设备中显示的效果可以做到自适应的 。比如,一个给定屏幕下,按钮要占整个视口的 30%,我们可以把这个按钮设置为30rpx之后,它就可以在不同设备上按照实际情况进行自适应的布局 。
2、便于开发:使用其他单位,如px或em,各自对应的像素往往是固定的 。这样一来,在移动设备中,开发者往往需要去算出文本的具体大小,以适应不同分辨率,工作较繁琐 。而使用 rpx,我们可以不需要考虑每个设备的具体像素密度,从而大幅减少开发的工作量 。
3、像素不失真:使用rpx定义了元素之后,我们在不同的设备间转移时,像素不会失真 。这是因为rpx内部根据每个设备像素密度的不同,会自动转化成具体的像素,确保元素的大小、布局能够适应不同的移动设备,同时像素的准确度也得以保障 。
反px的转换规则虽然反px的好处很多,但是它的具体数值是多少呢?
对于 其它全局样式和字体大小,我们还是沿用大多数人使用的px 。所以,为了便于计算,我们把 iphone8 的屏幕宽度定义成了 750rpx,即root font-szie为75px 。这就意味着 1rpx 等价于 0.01rem;
要把 px 转成 rpx,就除以 75,然后直接加上 rpx 或者 rem 单位即可 。比如,一个元素原来设置的宽度为 150px,现在需要转换成 rpx,我们就将 150 / 75 = 2,然后把单位改成 rpx, 即可得到 2rpx 。而要把 rpx 转成 px,我们就乘以 75 即可 。
因此,使用反px的转换规则非常简单明了 。为让自己摆脱繁琐的单位换算,反px还是一个很好的选择 。
反px在实际项目中的应用反px在移动端的web项目中,特别是基于多屏的开发中最为常见,其优势也得到越来越多的被认可 。首先,对于多屏幕、高像素密度的设备,它能够起到很好的自适应作用;其次,反px也有效地解决了字体大小变化的问题,使开发者们无需在不同的分辨率下单独进行调整 。
下面来举一个实际的例子 。我们可以看到下图中,使用了 rpx 定义宽度的固定元素,其自适应效果是十分显著的:在不同设备上的表现都非常好,它可以很好地满足平板和手机分辨率不同的需求 。
在使用反px的同时,它也需要结合具体情况进行选择 。在开发微信小程序的时候,使用 rpx 单位的场景还是较多的 。而在 HY(丽水环保) 的工程中,我们使用 FSL(Flexible Style Sheets Language) 作为 CSS 预处理语言,其支持 px ,rem,em,rpx 等多种尺寸单位,极大方便了我们的开发过程 。
小结反px是一种新型的单位,在前端开发中的应用也是越来越广泛 。它可以自适应不同的移动设备,并且在字体大小变化方面也有很好的解决方案 。同时,反px也很好地解决了元素尺寸在不同设备间转移时的像素失真问题,让开发者们的工作更加简单 。当然,反px也并非完美,因为它与 em、rem、px 等单位有一些区别和限制,需要开发者权衡利弊进行选择 。

推荐阅读