设备像素也叫物理像素，就是设备的真实像素
如电脑显示器常见的 1k(1920x1080)、2k(2560*1440)、4k(3840x2160) 等
以前使用 1k 显示器时往往直接可以用，但是用 2k 以上时发现字体会变得比较小，这就是因为设备像素大了，导致同样大小的像素点占的面积小了
而想让字体占同样的面积，使用更多像素点，更清晰，那就需要设备独立像素了
设备独立像素也叫逻辑像素
每个逻辑像素对应的设备像素数量是由操作系统(包括用户配置)决定的
理论上像素必须整数倍缩放，但是操作系统通过插值，抗锯齿等优化可以适配非整数倍，当然效果可能比整数倍差一点
像我现在的 2k 屏幕，设备独立像素我 mac 设置的是 2016x1134(HiDPI)，mac 的说明也是 looks like 2016x1134
win 也可以进行缩放调整，如常用 150%
HiDPI 其实是一个缩写 High Dots Per Inch，每英寸包含数量更多的像素，概念名称不重要，本质都是，每英寸包含数量更多的像素
设备像素比就是操作系统配置的 设备像素 / 设备独立像素 来处理设备独立像素，设备像素比越高，越清晰
CSS 像素就是 1:1 基于设备独立像素
由此就知道了，我们开发网页不需要关注用户设备的分辨率与缩放，因为这是操作系统和用户对设备独立像素的配置
我们需要的是一个设计标准，设计理念是以能放下所有内容的宽度设计即可
像移动端，根据 比较小宽度的手机 iPhone5 的标准，设备像素宽度 750，DPR2，得出设计稿宽度 375px
像 PC 端，我们一般以某比较小宽度的电脑为标准，使用 1260px
而浏览器内的缩放，就是将 CSS 像素与设备独立像素的比值提高，不需要特地关注，使用 移动端为主的宽度响应设计即可
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这一行 html 代码是不是很常见
作用是 让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放
如果没有配置，就梦回 2010 年，3G 网看网页还要上下左右看，因为 viewport 的宽度默认是网页最大宽度
配置后，在 PC 端，浏览器宽度肯定小于设备宽度，一般不影响
但是在移动端，就构成了我们现在的移动端页面，宽度固定在移动端宽度，且不可缩放
rem 方案是 viewport 的过渡方案，将设计稿除以 100，等分为 7.5 份来实现移动端不同屏幕尺寸配置不同的字体大小
vw 在适配完成后，已经可以更好的，语义化的使用了，也可以通过 postcss 插件进行 px-vw 的转换
仓库 flexible也已经声明
由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。
从移动端的宽度变大字体变大
变成宽度变大内容变多
例如特斯拉、tailwind 官网等，宽度的变化，不会导致字体大小的变化
但是有图片变化等需求的，仍然可以使用 vw 适配，或者使用 aspect-ratio 保持宽高比
如通过媒体查询，我们就可以直接使用 px，从移动端宽度 375px 开始，宽度变大到 768px，适配平板宽度，宽度变化到 1260px，适配 pc 宽度
根据设计的需求，对部分需要同比放大的元素，我们可以将 px 换成 vw
另外，如果还是有移动端所有元素同比放大需求的，可以自定义插件移动端全部使用 px-vw 转变，平板与 pc 端使用媒体查询后的 px，避免平板与 pc 端内容过大的问题
设置各元素的宽度就等于设计稿中宽度，然后计算出设计稿宽度和实际设备显示宽度的比例，之后用 scale 属性进行缩放使其实际显示宽度等于设备显示宽度
小心使用