为什么web项目还是使用 px?

3：本文建议读者一般情况遵循：同样观看距离情况下，大屏看的更多而不是大屏看的更大的设计最佳实践来进行布局，并且以这种最佳实践作为理论依据来传递给设计师（当然你觉得等比缩放才是合理的，请看其他回答，该回答不适合你）

4：本文没有鼓吹读者使用响应式布局，也没有鼓吹读者盲目忽略兼容性使用 vx和vxxx ，同时也没有反对读者使用 rem 这个单位本身原有的定义来实现一些布局

5：评论前请仔细阅读并理解本文内容，以免出现为了对话不在同一个频道的情况

你们老是鼓吹 rem 的，醒醒吧，别再看网上大片大片的 rem 文章

flexible 方案已经废坑了，已经废坑了，已经废坑了

对， flexible 已经不维护了，原因自己看 flexible的github

px 没有问题，用 rem 来实现自适应才有问题（因为它是 vx，vxxx 单位的备胎），能问这种问题的人，应该认真研究一下 viewport 。

说说几个概念

ppi（pixel per inch） 每英寸像素，指的是屏幕在每英寸的物理像素，更高的 ppi 意味着屏幕的清晰度更佳。

ppi（pixel per inch） 每英寸像素，指的是屏幕在每英寸的物理像素，更高的 ppi 意味着屏幕的清晰度更佳。

所谓高分屏，其实就是指 ppi 大于同类设备的屏幕。比如对于桌面设备，大于 96ppi 。对于移动设备，大于 160ppi 所谓视网膜屏，其实就是指在该观看距离内超出人类的辨认能力的屏幕。比如对于桌面设备，大于 192ppi 。

对于移动设备大于 326ppi ，对于移动设备而言，一般来说 ppi 以160为一个档次也就是假设一个 ppi160 ，2寸x3寸的屏幕，物理像素应该是 320x480 。同理 ppi320 ，同样尺寸的屏幕，物理像素是640x960由于它们尺寸一致，假设它们观看距离一致，那么消除掉ppi的影响，他们的逻辑像素是一致的也就是 逻辑像素长度 = 物理像素长度 * 160 / ppi 得出都是 320 x 480 当然，由于生产标准不一致，不可能做到绝对的 160ppi 作为标准，所以 ppi 的等级划分是动态的

dpr （device point ratio / device pixel ratio） 渲染像素与逻辑像素的比例。由于渲染像素一般等于逻辑像素，如果 ppi 是以160为基准的话，那么 dpr = ppi / 160 多少倍屏或者多少x（三倍屏， 3x ，意思就是 3dpr ），一般来说就是说的是这个值

viewport 像素又是什么，它本质是 DIP（Device Independent Pixels） ，中文意思设备无关像素，是与上述所有像素都无绝对逻辑关系的一个单位。其实是浏览器内部对逻辑像素进行再处理的结果，简单来理解就是调整逻辑像素的缩放来达到适应设备的一个中间层对于 pc，viewport 是不生效的，所以在pc上，px其实就是逻辑像素 （chrome） 。但是逻辑像素是与软件实现有关的，所以会出现一些问题。比如在 win 上，对于部分国产马甲浏览器， viewport 内部没有适配系统的缩放等级，导致渲染的内容过小

dpr （device point ratio / device pixel ratio） 渲染像素与逻辑像素的比例。由于渲染像素一般等于逻辑像素，如果 ppi 是以160为基准的话，那么 dpr = ppi / 160 多少倍屏或者多少x（三倍屏， 3x ，意思就是 3dpr ），一般来说就是说的是这个值

viewport 像素又是什么，它本质是 DIP（Device Independent Pixels） ，中文意思设备无关像素，是与上述所有像素都无绝对逻辑关系的一个单位。其实是浏览器内部对逻辑像素进行再处理的结果，简单来理解就是调整逻辑像素的缩放来达到适应设备的一个中间层对于 pc，viewport 是不生效的，所以在pc上，px其实就是逻辑像素 （chrome） 。但是逻辑像素是与软件实现有关的，所以会出现一些问题。比如在 win 上，对于部分国产马甲浏览器， viewport 内部没有适配系统的缩放等级，导致渲染的内容过小

在 head 设置 width=device-width 的 viewport

在 css 中使用 px

在适当的场景使用 flex 布局，或者配合 vw 进行自适应

在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询

在跨设备类型如果交互差异太大的情况，考虑分开项目开发

那么 viewport width=device-width 是什么意思，其实就是让 viewport 的尺寸等于逻辑像素的尺寸

在 head 设置 width=device-width 的 viewport

在 css 中使用 px

在适当的场景使用 flex 布局，或者配合 vw 进行自适应

在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询

在跨设备类型如果交互差异太大的情况，考虑分开项目开发

那么 viewport width=device-width 是什么意思，其实就是让 viewport 的尺寸等于逻辑像素的尺寸

那么你可能会问，那什么方案才是合理的？当然我说了这么多，你还是觉得等比是合理的，我没话说。

我以为，合理的适应方案，是 px +各种布局手段为主， vx，vxxx +媒体查询为辅的方案，因为上面也说了， px 是跟逻辑像素挂钩的，而逻辑像素反映的是同样观看距离设备的屏幕尺寸。既然手机和平板是同样观看距离的设备，那么，可以简单理解为，逻辑像素就等同于物理尺寸（厘米分米那种单位）

一个合理的视觉产品，难道是人去调整观看距离而固定物理尺寸的？而不是固定观看范围而调整调整屏幕尺寸的？举个极端例子，电影院怎么不放一台手机去播电影，让观众都凑到屏幕前面看？

那么用逻辑像素来进行布局，会是什么样的效果。

逻辑像素布局，元素的物理尺寸是几乎一致的，但是在不同屏幕下看到的总体比例是不同的。这回导致一些结果，就是大屏手机看的更多

至于rem方案，除了盖楼的兄弟说的问题，还有会导致富文本显示错误，你想想，你把 viewport 改了迁就rem来实现 vw ，那么你页面的 viewport 像素就会不正常甚至异常，富文本里边如果使用了 px ，那么px就会变小，富文本的内容会变得小的无法看，除非你家的富文本编辑器是自己实现的或者使用 iframe ，不然没法解决

放眼看 vw 已经可以在移动端浏览器大规模使用了，这也是 flexible 方案不维护的主要原因，所以 rem 这个备胎应该早就下舞台了

但是可恶的是网上还有大规模鼓吹 rem 甚至还有说0202还在用 px 的言论，简直心寒

再说自适应和响应式

普遍认为响应式就是以媒体查询做为解决方案的手段，而其他都是自适应

自适应和响应式可以同时存在

个人认为，自适应应该只存在于一个同一类设备中，而不存在pc/手机适应，原因刚才也说了

声明一下，本人并不是鼓吹读者使用响应式而不用自适应，那些拿响应式开发效率不高来吐槽的朋友消停一下，看清楚我表达的意思

自适应，是应该实现的，比如 a 手机和 b 手机之间就应该采用自适应。因为他们的逻辑像素跟屏幕尺寸差别不大，交互方式差别也不大。自适应是成本比较低的方案

但是，即使我们需要自适应，但不代表我们需要 vw ，甚至是 rem ，那是两码事，实现自适应的方案还有很多，远古时代的流式布局，还有现代的 flex ，都可以给前端作为参考。

vx，vxxx

vx，vxxx 布局很麻烦，但我相信 rem 其实也很麻烦。 px2rem ？为什么要使用 px 来转 rem ？那如果我真想用 px 这个单位的时候怎么办？容我深思，emmmm....``

所以我实现了一个 rdp-loader 的方案，为啥叫 rdp（relative device point） ，因为我也想不到还有什么单位没用上了

在这里不知羞耻的放出源码，写的有些随意（因为我懒！！），你们写的应该比我好，大神轻拍

constr = /([d.]+)rdp/g

constloaderlltils = require( 'loader-utils');

constdefaultOptions = {

useRpx: false,

size: 375

}

module.exports = function( content) {

this.cacheable;

constoptions = {

...defaultOptions,

...(loaderlltils.getOptions( this) || {})

}

constrpxDPI = 2

constrpxSize = 375

// 750 / 100

// 375 * 2 / 100 / 2

returncontent.replace(r, (_,number) => {

returnoptions.useRpx ?

` ${(+number) * rpxSize * rpxDPI / options.size }rpx'

: '${((+number) / (options.size / 100)).toFixed(5)}vmin`

})

}

这个 webpack loader 可以嵌入小程序或者 web mobile 进行开发，使用逻辑像素的写法就可以转换成 vmin 或者 rpx

其中参数两个， useRpx ，在小程序使用， size ，就是设计稿的基准逻辑像素

当我想用等比缩放的布局的时候，我就用 rdp ，如果我想使用基于逻辑像素布局的时候就用 px ，全程无缝切换

.elem{

/* 使用等比缩放 */

width: 100rdp;

/* 使用逻辑像素 */

width: 100px;

}

同理，在rn的实现

exportfunctionrdp( size:number) {

returnDimensions.get( "window").width/ 375*size;

}

虽然我是提供了 vx，vxxx 的方案，但注意一点，什么时候使用 vx，vxxx 的布局方案

我建议是，几乎不用，实际上，暂时为止，我也想不到什么场景是必须使用等比缩放的情况

在更多的时候，我们应该使用 flex 或者定位配合百分比等方案来处理

当然 vx，vxxx 是可以无缝转换 rem 的项目的，作为面向 viewport 和 px 不习惯或者不喜欢的朋友，可以作为一个过渡方案

就像 flexible github 废弃后大篇幅提供了 vx，vxxx 的兼容处理方案一样，很多人也会误读，以为 vx，vxxx 是银弹

希望 vx，vxxx 不要成为下一个 rem ，希望大家为 viewport 和 px 正名

最后

如果你觉得这篇内容对你挺有启发：

关 注 我 们 ， 第 一 时 间 接 收 原 创 、 精 选 干 货 文 章 ， 让 你 的 技 能 树 加 速 点 满 ！

[ 关 注 我 们 ， 回 复 关 键 词 ： 【 加 群 】 进 群 学 习 ， 回 复 ： 【 资 料 包 】 领 取 前 端 进 阶 资 料 包

这么好的文章，你不点个在看？返回搜狐，查看更多