轻量,没有依赖。

安装: npm install enquire.js

API:

  enquire.register(mediaQuery, handler).

    mediaQuery: 字符串,需要响应的媒体。

    handler: 函数或对象,

  enquire.unregister(mediaQuery[, handler])

    mediaQuery: 字符串,需要注销响应的媒体。

    handler: 函数或对象,可不写,一旦写了,只有这个handler被注销

  handler Object:

    destory: 当handler是unregister状态时响应。

    deferSetup: 布尔值。默认false,设置为true时,推迟执行setup里的回调,直到第一次match时才执行。

    setup: 函数。

      一般情况下,如果当match时需要请求数据,改变UI。变成unmatch不需要显示UI,再变回match,又要再一次请求数据,显示UI,请求数据就会有很多次。setup的存在就是让数据只需要请求一次,将数据与UI的显示分离开来。即在setup中请求数据,在match中显示UI,setup的回调是只会执行一次的。

    match: 函数。媒体匹配时的回调。

    unmatch: 函数。媒体不匹配时的回调。   

主要使用的方法为 register。

enquire.register('screen and (max-width: 45em)', {
// 以下为使用的五种选择 // 当媒体查询与上述匹配时,即当窗口宽度小于45em时的响应
match: function() {},
// 当窗口从匹配调整到不匹配以后的响应
unmatch: function() {},
// 只会响应一次,when the handler is registered?
setup: function() {},
// 默认为false,一旦被设置为true,defers execution of the setup function until the first time the media query is matched
deferSetup: true, destroy: function() {},
// triggered when handler is unregistered. Place cleanup code here
destroy: function() {},
});

inquire允许在register中有多个处理程序,

// 可以把各种回调放在一个数组中
enquire.register('screen and min-width: 45em', [
{ match: function() { console.log('handler 1 matched'); } },
{ match: function() { console.log('handler 2 matched'); } }
]); // 或者用以下的方式
const query = 'screen and (min-width: 45em)';
enquire.register(query, function() { console.log('handler 3 matched'); });
enquire.register(query, function() { console.log('handler 4 matched'); });
...

当存在很多种不同的屏幕宽度,每种宽度需要不同的布局时,

enquire
.register('screen and (max-width: 50em)', function() {
// handler 1 matched
});
.register('screen and (max-width: 40em)', function() {
// handler 2 matched
});

取消注册处理程序,

  enquire提供了unregister方法去取消register,

const query1 = 'screen and (min-width: 40em)';
const query2 = 'screen and (min-width: 5oem)';
const handler1 = {
match: function() {},
destory: function() { console.log('handler 1 destoryed'); },
};
const handler2 = {
match: function() {},
unmatch: function() { console.log('handler 2 unmatched'); }
}; enquire.register(query1, handler1);
enquire.unregister(query1); // 'handler 1 destoryed' enquire.register(query2, handler2);
enquire.unregister(query2, handler2); // 'handler 2 unmatched'

  当unregister只有一个参数query时,匹配该query的handler将会全部被注销,即是说不再会有关于该query的任何操作和响应。

  当unregister有两个参数query和handler时,注销指定query的指定handler。

  当handler内有destory时执行destory内的回调,没有destory时,执行unmatch。

在项目中,通过match和unmatch去改变组件的状态,以控制组件是否显示或以怎样的形式显示来达到响应式布局。

enquire.js-响应css媒体查询的轻量级javascript库的更多相关文章

  1. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  2. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  3. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  4. css媒体查询:响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  5. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  6. 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  7. CSS媒体查询及其使用

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  8. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  9. css媒体查询aspect-ratio宽高比在less中的使用

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配   使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...

随机推荐

  1. react-native webView android使用本地html问题

    react-native WebView组件使用本地html时候,一般都是这样使用 var source = require('../html/my.html') : <WebView sour ...

  2. SearchScore

    static void Main(string[] args) { Console.WriteLine("请输入要查询的学生姓名!"); string nameToQuery = ...

  3. SQL Server 2008 无法安装U890

    安装U890,环境检测的时候,却提示数据库不符合要求, 解决方法: 通过修改SQLServer的版本号 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MSSQLServ ...

  4. UNDO -- Concept

     Undo data Records of the actions of transactions, primarily before they are committed. The database ...

  5. Java实训课

  6. hadoop 安装之 hadoop、hive环境配置

    总结了一下hadoop的大致安装过程,按照master . slave的hadoop主从类别,以及root和hadoop集群用户两种角色,以职责图的方式展现,更加清晰一些

  7. 简化kubernetes应用部署工具之Helm应用部署

    介绍 微服务和容器化给复杂应用部署与管理带来了极大的挑战.Helm是目前Kubernetes服务编排领域的唯一开源子项目,做为Kubernetes应用的一个包管理工具,可理解为Kubernetes的a ...

  8. Vant UI 安装

    一:安装 npm i vant -S 二.引入组件(共有三个方法) 方法一:使用 babel-plugin-import (推荐) 1. 安装 babel-plugin-import 插件 npm i ...

  9. C# Winform 仪表盘

    winform 仪表盘相关下载链接://download.csdn.net/download/floweroflvoe/10432601?utm_source=bbsseo 控件首次拖拽上来是这样的: ...

  10. hdu多校第4场E. Matrix from Arrays HDU 二维前缀和

    Problem E. Matrix from Arrays Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total S ...