介绍
ish.js 是一个前端开发时很有用的 npm 包，它可以帮助我们解决移动设备适配问题。移动设备的屏幕大小各异，使用 ish.js 可以让我们在编写样式时，将样式以最小分辨率为基准，在其他分辨率下也能自适应。
安装 ish.js
使用 npm 安装 ish.js，打开终端，进入项目的根目录，输入以下命令：
--- ------- --- ------
引入 ish.js
在 HTML 文件中引入 ish.js：
------- ---------------------------------------------
使用 ish.js
在样式文件中使用 @include 来应用 ish.js 提供的 mixin。以下为使用方法：
-------- -------- - -- - --- ----------- ---------- ----- - -------- -------- ---- - -- - --- --- --- ----------- ---------- ----- - -------- -------- - -- - --- ----------- ---------- ----- -
@include 的第一个参数为最小分辨率，第二个参数为可选的最大分辨率。当屏幕分辨率小于等于第一个参数或者大于第二个参数时，样式将不会应用。
示例代码
以下为使用 ish.js 的完整代码示例：
HTML
--------- -----
----- ----------
------
----- ----------------
------------- ------------
------- ---------------------------------------------
----- ---------------- -------------------
-------
------
---------- ---------
----- ------ --------------------------------------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------CSS (style.scss)
-- ---------------
------ -------- -
-------- -----
---------------- -------
------------ -------
-
-- -- ------ ------
-------- -------- -
---------- -----
-
-------- -------- ---- -
---------- -----
-
-------- -------- -
---------- -----
-
-- ------ ---------
---------- -
----------- -----
-------- -------- -
------ ------
------- ------
-
-------- -------- ---- -
------ ------
------- ------
-
-------- -------- -
------ ------
------- ------
-
-
-- ------ ---------
---- -
------ -----
------- -----
------- -----
----------------- --------
-------- -------- -
------ -----
------- -----
-
-------- -------- ---- -
------ -----
------- -----
-
-------- -------- -
------ -----
------- -----
-
-效果如下图所示：
总结
ish.js 是一个优秀的解决移动设备适配问题的 npm 包，它可以让我们在样式编写时，只需以最小分辨率为基准，就可以自适应到更大的分辨率，极大地提高了我们的开发效率。希望本文可以为读者带来帮助，同时也欢迎大家在评论区留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600558a081e8991b448d5edc