移动开发那些像素之间的事

╰+攻爆jí腚メ 2022-12-18 06:55 98阅读 0赞

# 屏幕分辨率 #

*  1080P 的分辨率是1920x1080 720P 1280 \* 720
 *  2K 屏幕是单一方向分辨率具有约 2000 像素的显示设备。最标准的 2K 分辨率为 2048×1024  
    | 型号 | 分辨率 |  
    | ---------------- | ----------- |  
    | IPhone 3GS | 320 \* 480 |  
    | IPhone 4 / 4s | 640 \* 960 |  
    | IPhone 5 / 5s | 640 \* 1136 |  
    | IPhone 6 / 7 / 8 | 750 \* 1334 |  
    | 华为 P30 | 1080 \* 2340 |  
    | IPhone X | 1125 \* 2436 |

# 物理像素 / 设备像素 #

设备像素 / 物理像素是一个长度单位。 1 物理像素对应显示设备中一个微小的物理部件。

设备像素是手机屏幕的一个参数，由手机制造商决定。例如 IPhone 6 的物理像素为 750 \* 1334

# 设备独立像素 / 设备无关像素 #

设备独立像素也是手机屏幕的一个参数，由手机制造商决定。例如IPhone 6 的设备独立像素为 375 \* 667

*  普通屏幕下 1 设备独立像素 等于 1 物理像素
 *  高清屏幕下 1 设备独立像素 等于 N 物理像素

# CSS 像素 / 逻辑像素 #

CSS 像素是 CSS 语言中用来表示长度的一个单位，单位为 px。  
1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示

# 像素比 / N倍屏 #

window.devicePixelRatio

像素比的作用——程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。

@media screen and (-webkit-min-device-pixel-ratio: 2) { 
        .logo { 
            background-image: url('./image/logo@2x.png');
        }
    }

# 像素之间的关系 #

*  页面不缩放的情况下，CSS 像素 == 独立设备像素 == 逻辑像素 == DIP == 位图像素
 *  在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素

<table> 
 <thead> 
  <tr> 
   <th>型号</th> 
   <th>设备像素总和</th> 
   <th>设备独立像素总和</th> 
   <th>像素比（N倍屏）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IPhone 3GS</td> 
   <td>320 * 480</td> 
   <td>320 * 480</td> 
   <td>1（1px=1物理设备像素=1物理像素）</td> 
  </tr> 
  <tr> 
   <td>IPhone 4 / 4s</td> 
   <td>640 * 960</td> 
   <td>320 * 480</td> 
   <td>2（2px=1物理设备像素=2物理像素）</td> 
  </tr> 
  <tr> 
   <td>IPhone 5 / 5s</td> 
   <td>640 * 1136</td> 
   <td>320 * 568</td> 
   <td>2（2px=1物理设备像素=2物理像素）</td> 
  </tr> 
  <tr> 
   <td>IPhone 6 / 7 / 8</td> 
   <td>750 * 1334</td> 
   <td>375 * 667</td> 
   <td>2（2px=1物理设备像素=2物理像素）</td> 
  </tr> 
  <tr> 
   <td>HUAWEI P10</td> 
   <td>1080 x 1920</td> 
   <td>360 x 640</td> 
   <td>3（3px=1物理设备像素=3物理像素）</td> 
  </tr> 
  <tr> 
   <td>IPhone X</td> 
   <td>1125 * 2436</td> 
   <td>375 * 812</td> 
   <td>3（3px=1物理设备像素=3物理像素）</td> 
  </tr> 
 </tbody> 
</table>

## iphone 6 的参数必须要记住 ##