@
目录物理像素指的是屏幕分辨率,物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750*1334
我们开发时候的1px(css像素) 不是一定等于1个物理像素的,一个px(css像素)的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
在早期当pc端和移动端都处于布局视口时,它们的物理像素比时对等的,1CSS像素 = 1 物理像素的
后面出现 Retina(视网膜屏幕)显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度,1CSS像素 = n 物理像素
对如插入图片,在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题,对于不同手机屏幕的物理像素比,采用不同倍数图来处理
<style> /* 在 iphone8 下面 物理象素比:2*/ img:nth-child(2){ width: 50px; height: 50px; } </style> <body> <!-- 原始图片分辨率: 50*50, 手机屏幕下显示模糊的(分辨率被放大2倍,失真) --> <img src="images/apple50.jpg" alt=""> <!-- 我们采取2倍图(图片分辨率:100*100) --> <img src="images/apple100.jpg" alt=""> </body>
对于背景图,通过background-size按照物理像素比缩放
<style> /* 1. 我们有一个 50 * 50的盒子需要一个背景图片,但是根据分析这个图片还是要准备2倍, 100*100 */ /* 2. 我们需要把这个图片缩放一半,也就是 50*50 background-size*/ div { width: 50px; height: 50px; border: 1px solid red; background: url(images/apple100.jpg) no-repeat; background-size: 50px 50px; } </style>
background-size
对背景图(精灵图)缩放。