CSS处理几种分辨率的方法,为什么要用css加载不同分辨率图片？这就让你彻底搞懂其中原理！...

前言

图片是前端er经常要处理的，最近发现，我身边很多人不知道手机端的图片为什么是用2倍大，背景定位又是怎么计算的呢？今天就来看下原理。

高清显示屏显示原理

高清显示屏起源于 retina ，就是鼎鼎大名的乔布斯提出的，这是一种备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏。总结有以下两个特点：

一种具备超高像素密度的液晶屏同样大小的屏幕上显示的像素点由1个变为多个，如下图：

retina显示屏 只是高清显示屏的一种

随着苹果的 retina显示屏 推出以来，很多厂商也开始推出自己的高清显示屏，如三星手机、小米手机、华为手机等，而目前市场的移动设备大都是高清显示屏了，其实它们的显示原理都是来自苹果的 retina显示屏。

高清显示屏下图片变模糊

了解高清显示屏的原理后，我们可以想象有同一张图片在不同的2部手机中，一部是普通显示屏，一部是高清显示屏，在同样大小的屏幕上，高清显示屏中的位图会被放大，图片会变得模糊。

常见高清显示屏中位图被放大的比例

我们可以了解到 retina显示屏 中图片被放大的倍数高达 2:1，而其实各种高清显示屏放大的倍数是不同的，有 1.3:1、1.5:1、2:1、3:1 ，目前最多的是 2:1，而 有些手机甚至已经到了图片被放大的倍数高达 3:1。

如何区分普通显示屏和高清显示器

devicePixelRatio，通过它的数值来区分普通显示屏和高清显示器，关于它的详细介绍可以去看张鑫旭大神写的一篇文章《设备像素比devicePixelRatio简单介绍》，写的非常好。实际上它就是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素 。

那么，通过计算 devicePixelRatio 的值，是可以区分普通显示屏和高清显示器，当devicePixelRatio值等于1时(也就是最小值)，那么它普通显示屏，当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。

如何设计高清背景图

为了更好的提升用户体验，节省移动端的流量，针对不同的显示屏，我们可以采取不用的方案，保证图片在不同显示屏幕下正常展现，这个方法跟设计原生APP中针对不同分辨率采用使用不同图片的原理相似。

利用媒体查询结合 devicePixelRatio 可以区分普通显示屏和高清显示屏，来加载不同尺寸的图片：

针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张2倍大的图片

基于现在大部分手机都是高清显示屏(大部分还是2倍屏)，所以一般设计稿给的尺寸也都是2倍的，完了也可以通过上边说的判断去制作3倍图进行加载保证用户体验。

举报/反馈