一、物理分辨率、逻辑分辨率

  • 物理分辨率（标准分辨率）：显示屏最高可显示的像素点数矩阵（像素行点数乘以列点数），不能调节
  • 逻辑分辨率：软件支持的重新分布像素点数矩阵，在一定范围内可调节，但不会超过物理分辨率

二、DP——物理像素、设备像素

Device Pixel。物理分辨率中的像素点即为设备像素，单位为pt(磅)，为绝对长度单位。

  • 1 pt = 1/72 inch = 1/72 英寸
  • 1 英寸 = 2.54 厘米

三、DIP——逻辑像素、设备独立像素

  • Device Independent Pixel。CSS像素是Web逻辑像素的一种，单位为px，为相对长度单位。
  • iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp

四、DPR——设备像素比

  • Device Pixel Ratio= 同一方向上的 物理像素 / CSS像素 (缩放比initial-scale为1时)。通常为 PPI/160 整数倍
  • window.devicePixelRatio可以直接获取dpr
  • 高清屏：dpr>1。dpr越大，1 CSS像素表示的物理像素点越多，显示越精细越清晰，故称之为高清
  • Android屏幕设备像素比分类：
    • hdpi [1.5倍]
    • xhdpi [2倍]
    • xxhdpi [3倍]
    • xxxhdpi [4倍]
  • 缩放：缩放比不再为1时，变化的都是CSS像素
    • 缩小之后一个设备像素可重叠几个CSS像素
    • 放大之后一个CSS像素与多个设备像素重叠

五、PPI/DPI——像素密度

  • PPI：Pixels Per Inch。每英寸能容纳多少颗物理像素点，用于描述屏幕的像素密度。屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成)。
  • DPI：Dots Per Inch。每英寸能容纳多少墨点，早期用于描述打印机的性能。印刷业普遍使用CMYK色域(青、品红、黄和黑)，通常屏幕上的设计DPI设成72，印刷品设计DPI设成300，就能保证屏幕上显示的尺寸和打印尺寸相同。现在也可同PPI一样用法

六、rpx——响应式px，750宽基准

  • 微信小程序设计 rpx 解决不同宽度手机宽度变形问题，rpx 是相对于基准宽度的单位，可根据屏幕宽度自适应
  • uni-app 规定屏幕基准宽度 750rpx。开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

七、设计像素

🧐——iPhone 6 Plus 的实际物理像素点个数是1080 1920，逻辑像素是 414 736，但为什么截屏图片宽高是1242 * 2208，window.devicePixelRatio 值也为3呢？

😇：iPhone 6 Plus系统定义的屏幕像素就是1242 2208，系统会自动把这些像素点塞进1080 1920个实际像素点来渲染，对于前端来说，1242 * 2208称为6 Plus的“设计像素”可直接视为6 Plus的“物理像素”

七、1px 边框问题

🧐——画个1px的边框，但屏幕显示为一条宽度为2—3个物理像素的线，怎么显示为1个物理像素？

😇：利用CSS3的transform: scale(0.5);、transform:scale(0.33);

  • 使用CSS的 -webkit-min-device-pixel-ratio媒体查询可以针对不同的DPR做出处理 ```css //scss mixin定义 $border-poses: top, right, bottom, left; $border-color: #eee; @mixin border-1px($color: $border-color, $poses: $border-poses) { position: relative; &::after {
    1.   content: '';
    2.   display: block;
    3.   position: absolute;
    4.   width: 100%;
    5.   @each $pos in $poses {
    6.       border-#{$pos}: 1px solid $color;
    7.       #{$pos}: 0;
    8.   }
    9.   @if $poses == 'top' or $poses == 'bottom' {
    10.       left: 0;
    11.       right: 0;
    12.       transform: scaleY(0.5);
    13.   }
    14.   @if $poses == 'left' or $poses == 'right' {
    15.       top: 0;
    16.       bottom: 0;
    17.       transform: scaleX(0.5);
    18.   }
    } }

.need-1px-border { @include border-1px(red, bottom); }

```html
<div class="need-1px-border">需要1px边框线的元素, 红色, 在下方</div>
  • 设置<meta name="viewport" content="width=device-width, initial-scale=0.5">中的 initial-scale

九、viewport

  • layout viewport：浏览器默认的viewport，通过document.documentElement.clientWidth 来获取
  • visual viewport ：浏览器可视区域的大小viewport，通过window.innerWidth来获取
  • ideal viewport，移动设备的理想viewport。

  • 防止缩小放大网页：

    <meta name="viewport" 
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

  • Vue项目适配vw

    npm i cssnano      cssnano-preset-advanced    postcss-aspect-ratio-mini 
postcss-preset-env postcss-px-to-viewport         postcss-write-svg --S

    module.exports = {
"plugins": {
  "postcss-aspect-ratio-mini": {},
  "postcss-write-svg": { //移动端1px解决方案
    utf8: false
  },
  "postcss-preset-env": {},
  "postcss-px-to-viewport": {
    viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
    viewportHeight: 1334, //视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
    unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
    viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
    selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 2, // 小于或等于`2px`不转换为视窗单位，你也可以设置为你想要的值
    mediaQuery: false // 允许在媒体查询中转换`px`
  },
  "cssnano": {
    preset: "advanced",
    autoprefixer: false,
    "postcss-zindex": false
  }
}
}

    十、参考资料

  • 移动前端开发之viewport的深入理解

  • Using the viewport meta tag to control layout on mobile browsers