首页 > 移动平台 > 详细

移动端布局 CSS像素与物理像素

时间:2021-01-05 22:21:06      阅读:5      评论:0      收藏:0      [点我收藏+]

CSS像素又被称为逻辑像素、是以px为单位

物理像素又被称为设备像素、是以pt为单位

 

在iPhone678中 物理像素为 750 x 1334

视网膜屏技术的到来,为了更细腻的显示,

将2个物理像素压缩成1个CSS像素来显示,此时dpr像素比为2 

技术分享图片

 

1css像素 = 2物理像素

也就是CSS像素色块被物理像素放大了一倍(文字 纯色不受影响)

此时放50x50css像素的图片,会被放大成100x100的物理像素(色块不均匀,变模糊)

图片却因为像素色块而受影响了(变模糊),所以引出了@2x图 @3x图

用100x100css像素的图片,手动调成50x50css像素,让视网膜屏自动放大成100x100物理像素就不会模糊

 

 

 

 

 

在的手机里,默认的布局视口是980px,

此时会出现视觉视口里面的文字非常小(DPR)

设置为理想视口后,会以设备的真实宽度进行显示

 

移动端布局 CSS像素与物理像素

原文:https://www.cnblogs.com/sangejava/p/14238000.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号