介绍
weighted-screen 是一款用于前端开发的 npm 包，它是基于 window.matchMedia 的封装实现，能够根据屏幕宽度的不同，为不同的屏幕设置不同的权重。
通过使用这个包，我们可以更方便地对页面进行响应式布局，实现对不同设备的适配。
安装
在终端中运行以下命令安装 weighted-screen：
npm install weighted-screen --save
使用
在页面中引入 weighted-screen：
import WeightedScreen from 'weighted-screen';
然后，我们可以使用 WeightedScreen 来定义不同屏幕宽度下的权重：
-- -------------------- ---- -------
----- -------------- - --- ----------------
--- ---- -- --
--- ---- -- --
--- ---- -- ----
--- ---- -- ---
---
-- ----
--------------------
--- -
--------- ----
---------- ----
--------- --
--
--- -
--------- ----
---------- ----
--------- --
--
--- -
--------- ----
---------- ----
--------- --
--
--- -
--------- ----
---------- ----
--------- --
-
---以上代码中，我们根据不同屏幕的宽度，定义了不同的权重，为每个屏幕设置了不同的图片宽度、高度和字体大小。
接着，我们可以用 weightedScreen.watch 方法来监听屏幕的变化，然后根据当前屏幕的宽度，改变页面的排版。
-- -------------------- ---- -------
----------------------
--- -- -- -
-- --
---------------
--
--- -- -- -
-- --
----------------
--
--- -- -- -
-- ----
---------------
--
--- -- -- -
-- ---
--------------------
-
---以上代码中，我们使用 weightedScreen.watch 方法来监听屏幕宽度的变化，并根据当前屏幕的宽度，调用了不同的函数来设置页面的大小和样式。
示例代码
下面是一个完整的例子，展示了如何使用 weighted-screen 实现响应式页面布局：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
----------------------
------ ----------------
---- -
------- --
-------- --
-
---- -
-------- -----
---------------- -------
------------ -------
------- ------
-
---- -
----------------- -----
------- -----
------ ------
-------- -----
--------------- -------
---------------- -------
------------ -------
-------------- ----
-
---- --- -
-------------- -----
-
------ -
---------- -----
------------ -----
----------- -------
-
--------- -
---------- -----
----------- -------
-
--------
-------
------
---- ------------
---- ------------
---- ------- ---------
---- ------------------------
---- --------------------------------
------
------
------- --------------
------ -------------- ---- ----------------------
----- -------------- - --- ----------------
--- ---- -- --
--- ---- -- --
--- ---- -- ----
--- ---- -- ---
---
--------------------
--- -
--------- ----
---------- ----
--------- --
--
--- -
--------- ----
---------- ----
--------- --
--
--- -
--------- ----
---------- ----
--------- --
--
--- -
--------- ----
---------- ----
--------- --
-
---
-------- -------------- -
----- --- - -------------------------------
--------------- - ------
---------------- - ------
-
-------- --------------- -
----- --- - -------------------------------
--------------- - ------
---------------- - ------
-
-------- -------------- -
----- --- - -------------------------------
--------------- - ------
---------------- - ------
-
-------- ------------------- -
----- --- - -------------------------------
--------------- - ------
---------------- - ------
-
----------------------
--- -- -- -
-- --
---------------
--
--- -- -- -
-- --
----------------
--
--- -- -- -
-- ----
---------------
--
--- -- -- -
-- ---
--------------------
-
---
---------
-------
-------总结
通过这篇文章，我们学习了如何使用 weighted-screen 这个 npm 包来实现响应式页面布局。这个包可以帮助我们更方便地对页面进行适配，为不同的设备提供更好的用户体验。希望这篇文章能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdef5