响应式设计中如何针对不同显示器的 dpi 设置不同的背景图片
在如今高度信息化的时代，不论在移动设备还是电脑台式机上，屏幕分辨率已经得到了长足的提升。但是，分辨率提高的同时意味着显示器的像素密度也会随之增大。这就会使得显示器显示的高清画质会变得更为细致、锐利，但同时，在同样大小的屏幕上，显示内容会变得更小。
出现了这样的情况，我们在针对响应式设计时，就急需一种能够扩展性非常强的方案来支持不同显示器对于响应式背景图片的呈现。而针对不同显示器的 DPI 设置不同的背景图片就是一种完美解决方案。
一、DPI 的定义
DPI，即每英寸点数，是指在每英寸的长度内，可以渲染出多少个像素。这被称为“像素密度”，通俗而言，DPI 表示的是一个设备可以在每英寸的长度内显示多少像素。DPI 数值越大则意味着一个设备可以显示越高分辨率的图片。
在了解了DPI的定义之后，我们就能够更好的理解如何在响应式设计中根据不同的 DPI 显示不同的背景图片。
二、响应式设计中的实现
在实现响应式设计的过程中，我们需要根据不同的 DPI 显示不同的背景图片，我们可以在CSS中为不同的 DPI 设置多个 CSS 类，并设置这些 CSS 类对应的背景图片。这里为了演示方便，我们以 1x、2x、3x 三个级别为例，分别设置适配于不同 DPI 的图片。
- 首先，我们需要为HTML页面设置一个背景图片容器，如下：
<div class="bg-container"></div>
- 接着，在 CSS 文件中，我们可以定义相应的 CSS 类，并分别针对不同的 DPI 显示不同的背景图片：
-- -------------------- ---- -------
--------------
------ -----
------- -----
-------------
----------------- -------------------
---------------- --------
------------------ ----------
-
------ -------------------------------- --- ---------------- ------- -
-- ----- -- --- ----- -- -- -- --
------------- -
----------------- ----------------------
-
-
------ -------------------------------- --- ---------------- ------- -
-- ----- -- --- ----- -- -- -- --
------------- -
----------------- ----------------------
-
-在上面的代码中，我们使用了 media 查询来针对不同 DPI 显示不同的背景图片。虽然此代码示例主要针对 Web 设计，但是你可以很容易地在移动 Web 设计和响应式应用中使用它。
三、结论
在本文中，我们介绍了如何在响应式设计中根据不同 DPI 显示不同的背景图片。我们应该适时地将此方案应用于我们的设计中，以支持不同分辨率的屏幕。通过这个方案，我们可以更好的规划设计，提高用户体验，并确保我们的站点或应用在各种不同的设备上都能够有非常好的显示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c07a914b275ea6fe09ef9