介绍
eqe 是一个轻量级的前端框架，主要用于响应式布局。基于类似于 CSS 的选择器，eqe 帮助开发者在保持 HTML 结构清晰的同时，轻松实现对各种设备的适配。
安装
使用 npm 将 eqe 安装到项目中：
npm install eqe --save
引入 eqe：
import eqe from 'eqe';
使用
初始化
调用 eqe.init() 方法进行初始化：
eqe.init();
选择器
基本使用和 CSS 选择器类似，但是 eqe 选择器的前缀是 :：
<div :class=":sm-12 md-6">Content</div>
上述代码中，:sm-12 表示在小屏幕设备上宽度为 12，:md-6 表示在中等屏幕设备上宽度为 6。
布局属性
宽度
使用 :col 属性设置宽度，取值范围 1~12：
<div :class=":col-12">Full width</div> <div :class=":col-6">Half width</div>
偏移
使用 :offset 属性进行偏移，取值范围 1~11：
<div :class=":col-6 :offset-3">Centered</div>
显示与隐藏
使用 :display 和 :hide 属性进行显示和隐藏：
<div :class=":display-none :md-display-block">Hide on small devices</div> <div :class=":hide-xs-only">Hide on extra small devices</div>
媒体查询
使用 @media 标签设置媒体查询：
<div :class="@media (max-width: 767px) :sm-col-12 :md-col-6">Half Width on Medium Devices and Full Width on Small Devices</div> <div :class="@media (min-width: 768px) :sm-col-6 :md-col-12">Half Width on Small Devices and Full Width on Medium Devices</div>
示例代码
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ----------------
----- --------------- ---------------------------- -----------------
------- -------------------------------------
------- -------------------------------------
-------
- -
----------- -----------
-
-------------- -
------- ------
------- --- ----- ------
-
--------
-------
------
---- ---------
---- --------------- --------------- ----- -- ------ ------- --- ---- ----- -- ----- -------------
---- -------------- --------- -------------------- -- ------ --- ---- ----- -- ----- -------------
---- -------------- ----------- ------ ---------- --------------- ----- -- ------ ------- --- ---- ----- -- ----- -------------
---- -------------- ----------- ------ --------- ---------------- ----- -- ----- ------- --- ---- ----- -- ------ -------------
---- --------------------- ----------------------- -- ----- -------------
---- --------------------------- -- ----- ----- -------------
------
--------
-----------
--- -----
--- -------
---
---------
-------
-------总结
eqe 是一个方便实用的前端框架，其便捷的响应式布局方式能够帮助开发者快速构建适配各种设备的网页。通过以上教程，相信大家能够掌握 eqe 的使用方法，并在今后的前端开发中能够灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e9d81e8991b448dbf2b