概述
enb-bem-techs-2x 是一个 npm 包，它可以帮助前端开发者在 BEM 架构中使用 2x 像素密度的图片。这个 npm 包包含了一系列的技术（Techs），其中一些可以生成不同密度的图片（利用 retina），而另一些则可以自动为页面元素添加需要的样式。（例如，在不同密度的图片之间选择）
安装
首先，需要安装 enb-bem-techs-2x：
npm install enb-bem-techs-2x
然后，在你的 make.js 文件中添加以下代码：
-- -------------------- ---- -------
-- ------ ----- ------
--- ----- - -------------------------
-- -- ----------------
------- - -------------------------------------
-- ----- -------
---- - -----------------------------------------------
-------------- - ---------------- -
-- ---
-- - ---------------- --------
---------------------------------
---------------------------------------
------------
-- - --- --- ---- ------- ------
--------------- ------- ------ ------- -------
------------ -------
-- -- ----- ---------
------------ --------
----------- -------------- ------
------- -----------
---
---------------------- -------------------- -
-- ---
---------------------
-- --- ---- ------------
-------------- - ------ ---
--------------
---------------- - ------------- -------- ----------- -------- ---
----------- - ------- ------- ---
--------- - ------- -------------- ---
------ - ------- --------- ------------ -------------- --
---
-----------------------
--------- --------
---
-- ---
---
-- ---
-用法
添加一个 CSS 类
你可以使用 enb-bem-techs-2x 的 tech add-2x-class 在 2x 像素密度的图片上添加一个 CSS 类。这个在不同 DPI 的图片之间切换会很有用。
-- -------------------- ---- -------
---------------------------------------- -
--------------- -------- -------
------- -----------------
------------- -
--------- ------ - ---------- --- ---- ------ -------
-
---
---------------------------------------------------- -
---------------- -------------
----------- -
------ ---------
--------- -----------
--
-------------- -------
---在这个例子中，我们使用 add-2x-class 把 control_bg CSS 类添加到一个 2x 大小的图片上。
生成一个 sprite
使用 enb-bem-techs-2x，你可以为页面中使用的 2x 像素密度的图片生成一个 sprite。
-- -------------------- ---- -------
---------------------------------------- -
--------------- -------- -------
------- -----------------
------------- -
--------- ------ - ----------
-
---
------------------------------------------------- -
------- ------------------
----------- ---------------------
------------ -------
--------------- -------
---在这个例子中，我们使用 sprite-2x 把密度为 2x 的图片合并到一个 sprite 中。你可以在你的 HTML 中使用这个 sprite：
<div class="my-element" style="background-image: url(./my-sprite.png); background-position: 10px 20px; width: 150px; height: 100px;"></div>
进行元素的 2x 像素密度自适应
enb-bem-techs-2x 提供了自适应 2x 像素密度图片大小的 CSS 技术，这将在你的页面加载太慢时派上用场。
-- -------------------- ---- -------
---------------------------------------- -
--------------- -------- -------
------- -----------------
------------- -
--------- ------ - ----------
-
---
-------------------------------------------------------- -
----------------- --------
----------- -
------ ------
------- ------
--
-------------- -------
---在这个例子中，我们使用 add-2x-attribute 基于当前设备的 DPI 添加了一个 background-image 属性到了一个 img 元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e9454