摘要：在前端開發(fā)中，css的單位有很多種，其中像em、px、rem、vw、vh等單位相信大家都已經(jīng)很熟悉了。但是近年來，開發(fā)者們也開始逐漸關(guān)注另一種新型的單位 —— 反px。那么反px到底是什么，又有什么特點(diǎn)呢？

反px的定義

首先，我們應(yīng)該知道“rem”的全稱是 “root em”，即“根元素的 em”，而“反px”可以理解為“根元素的 px”。
換句話來說，如果我們定義 html 元素的字體大小為 16px，那么 root mobile html 將被視為 16rpx。這樣一來，我們使用此單位可以根據(jù)根節(jié)點(diǎn)字體大小的變化自適應(yīng)頁面布局，具有對設(shè)備適應(yīng)性、字號變化的靈活性，解決了前端開發(fā)中的一些難題。

反px的優(yōu)點(diǎn)

相較于其它常用單位，反px有以下的幾個明顯的優(yōu)點(diǎn)：

1、自適應(yīng)：使用 rpx 定義的元素，在不同設(shè)備中顯示的效果可以做到自適應(yīng)的。比如，一個給定屏幕下，按鈕要占整個視口的 30%，我們可以把這個按鈕設(shè)置為30rpx之后，它就可以在不同設(shè)備上按照實(shí)際情況進(jìn)行自適應(yīng)的布局。

2、便于開發(fā)：使用其他單位，如px或em，各自對應(yīng)的像素往往是固定的。這樣一來，在移動設(shè)備中，開發(fā)者往往需要去算出文本的具體大小，以適應(yīng)不同分辨率，工作較繁瑣。而使用 rpx，我們可以不需要考慮每個設(shè)備的具體像素密度，從而大幅減少開發(fā)的工作量。

3、像素不失真：使用rpx定義了元素之后，我們在不同的設(shè)備間轉(zhuǎn)移時(shí)，像素不會失真。這是因?yàn)閞px內(nèi)部根據(jù)每個設(shè)備像素密度的不同，會自動轉(zhuǎn)化成具體的像素，確保元素的大小、布局能夠適應(yīng)不同的移動設(shè)備，同時(shí)像素的準(zhǔn)確度也得以保障。

反px的轉(zhuǎn)換規(guī)則

雖然反px的好處很多，但是它的具體數(shù)值是多少呢？
對于 其它全局樣式和字體大小，我們還是沿用大多數(shù)人使用的px。所以，為了便于計(jì)算，我們把 iphone8 的屏幕寬度定義成了 750rpx，即root font-szie為75px。這就意味著 1rpx 等價(jià)于 0.01rem；

要把 px 轉(zhuǎn)成 rpx，就除以 75，然后直接加上 rpx 或者 rem 單位即可。比如，一個元素原來設(shè)置的寬度為 150px，現(xiàn)在需要轉(zhuǎn)換成 rpx，我們就將 150 / 75 = 2，然后把單位改成 rpx, 即可得到 2rpx。而要把 rpx 轉(zhuǎn)成 px，我們就乘以 75 即可。

因此，使用反px的轉(zhuǎn)換規(guī)則非常簡單明了。為讓自己擺脫繁瑣的單位換算，反px還是一個很好的選擇。

反px在實(shí)際項(xiàng)目中的應(yīng)用

反px在移動端的web項(xiàng)目中，特別是基于多屏的開發(fā)中最為常見，其優(yōu)勢也得到越來越多的被認(rèn)可。首先，對于多屏幕、高像素密度的設(shè)備，它能夠起到很好的自適應(yīng)作用；其次，反px也有效地解決了字體大小變化的問題，使開發(fā)者們無需在不同的分辨率下單獨(dú)進(jìn)行調(diào)整。

下面來舉一個實(shí)際的例子。我們可以看到下圖中，使用了 rpx 定義寬度的固定元素，其自適應(yīng)效果是十分顯著的：在不同設(shè)備上的表現(xiàn)都非常好，它可以很好地滿足平板和手機(jī)分辨率不同的需求。

在使用反px的同時(shí)，它也需要結(jié)合具體情況進(jìn)行選擇。在開發(fā)微信小程序的時(shí)候，使用 rpx 單位的場景還是較多的。而在 HY(麗水環(huán)保) 的工程中，我們使用 FSL（Flexible Style Sheets Language） 作為 CSS 預(yù)處理語言，其支持 px ，rem，em，rpx 等多種尺寸單位，極大方便了我們的開發(fā)過程。

小結(jié)

反px是一種新型的單位，在前端開發(fā)中的應(yīng)用也是越來越廣泛。它可以自適應(yīng)不同的移動設(shè)備，并且在字體大小變化方面也有很好的解決方案。同時(shí)，反px也很好地解決了元素尺寸在不同設(shè)備間轉(zhuǎn)移時(shí)的像素失真問題，讓開發(fā)者們的工作更加簡單。當(dāng)然，反px也并非完美，因?yàn)樗c em、rem、px 等單位有一些區(qū)別和限制，需要開發(fā)者權(quán)衡利弊進(jìn)行選擇。

總之，我們需要看到反px作為一種新型單位的潛在優(yōu)勢，以及它與其他單位的特點(diǎn)和使用上的區(qū)別。不管是在實(shí)際項(xiàng)目中，還是在技術(shù)的發(fā)展歷程中，反px都是一個值得我們學(xué)習(xí)和了解的新概念。