移动端页面动态加载 2X & 3X 图片

 开发背景  

  1. 开发移动端H5页面
  2. 面对不同分辨率的手机

为什么要用不同倍率下的图片  ?

有时候我们会发现,当我们在适某一机型的时候,显示上没什么问题。但是一旦我换到另外一部手机,发现出现了模糊的情况,尤其以图片更为显著,这只是表象,究其原因是  设备像素比,

可以先看几个概念 :

在进行具体的分析之前,首先得知道下面这些关键性基本概念(术语)。

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向

 概念说起来很难理解   看一下不同像素比下的表现,看作是2cmx2cm的正方形被切割成四块,然后遇到dpr为2的时候,被切割的四块又被分别切割成四块,但是总面积不变。

移动端页面动态加载 2X & 3X 图片_第1张图片移动端页面动态加载 2X & 3X 图片_第2张图片移动端页面动态加载 2X & 3X 图片_第3张图片移动端页面动态加载 2X & 3X 图片_第4张图片

为什么模糊呢?

在图片中表现在浏览器中时候   位像视图已经 是图像表现的最小单元可  但是 还有一些临近的需要表现  它不能再被进行切割。于是为了能够显示出来,就只能就近取色,从而导致所谓的图片模糊问题。 一句话就是面积小 结果分的小格太多了,怎么消除,就是   就是使用跟dpr同个倍数大小的图片

在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr

如果是直接引入的img 标签   在页面渲染前 判断 window.devicePixelRatio 的值 ,然后在页面中引入 不同的图片

       if(window.devicePixelRatio===2)
        {
          //......

        } else{

            //.....
        }

在css中,可以通过-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

@mixin bg-image($url) {

    background-image: url($url + "_2x.png");

    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {

        background-image: url($url + "_3x.png");

    }

}

你可能感兴趣的:(css)