在前端开发过程中，响应式设计是非常重要的一个概念。不同设备的屏幕尺寸和分辨率带来的布局问题需要我们针对不同设备进行样式的自适应处理。为了简化这个过程，有很多工具和框架被开发出来。webremix 就是其中之一，它是一个自适应布局的 npm 包，可以帮我们很方便的处理样式的适配问题。本文将从安装、使用、原理以及实例等多个方面详细介绍 webremix 的使用方法。
安装
安装 webremix 只需要一行命令即可：
npm install webremix --save
使用
安装完成后，我们可以在样式文件中引入 webremix：
@import '~webremix';
webremix 默认将屏幕分为 10 份，即将屏幕宽度分为 10 个等份，即 10vw。我们可以根据实际情况进行适配。
.app {
font-size: 2rem;
margin-bottom: 1rem;
background-color: #ccc;
height: 10vw;
width: 10vw;
border-radius: 50%;
}在上面的代码中，.app 是一个类名，设置了文字大小、外边距、背景色等基础样式，height 和 width 设置为 10vw，即在不同尺寸的屏幕中都保持一致的大小，这样可以让我们的页面更加美观。
原理
webremix 的原理其实也很简单，它正常的屏幕宽度除以 10，得到 1vw（Viewport Width 即视口宽度）。所属，我们可以把屏幕分割为 10 个等份，这 10 份都是以 1vw 为单位的宽度，方便我们进行自适应的布局。
实战
我们通过一个简单的实例来加深对 webremix 的理解。
代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
--------------- ----------
-------
------- ------------
---- -
----------------- --------
------ --------
-
---------- -
------ -----
------- - -----
-------- -----
---------------- --------------
-
----- -
------ -----
------- -----
----------------- --------
-------- ----
-------------- ----
-
--------
-------
------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
-------效果图
在上面的代码中，我们定义了三个带样式的盒子，他们的宽高都是以 30vw 为单位，并且间距使用 flexbox 布局的 space-between 属性进行控制。
总结
webremix 可以让页面在不同尺寸的屏幕上拥有较好的适配性，它的使用非常方便，配合其他框架和工具完成响应式设计可以提高我们的工作效率和页面的体验，非常适合前端初学者和快速开发的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd36