轻量,没有依赖。

安装: 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. HTML5外包团队 更新一下2019最新案例

    本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企鹅号 372900288 祝大家 ...

  2. js可拖拽的div

    function chatDrag(div1) { div1.onmousedown = function (ev) { var oevent = ev || event; var distanceX ...

  3. 关于Ocelot和Consul 实现GateWay(网关) 服务注册 负载均衡等方面

    Ocelot   路由  请求聚合  服务发现 认证  鉴权 限流熔断 内置负载均衡器 Consul   自动服务发现    健康检查 通过Ocelot搭建API网关   服务注册   负载均衡 1. ...

  4. 在线批量将gps经纬度坐标转换为百度经纬度坐标

    1.首先打开百度api示例页面: 在浏览器地址栏中输入:http://developer.baidu.com/map/jsdemo.htm#a5_3 2.修改代码 如下图,将需要批量转换的坐标,按规则 ...

  5. Unity --- 在原目录中,将选中的Texture剥离为rgb和alpha

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; us ...

  6. 换行符java去除字符串中的空格、回车、换行符、制表符

    import java.util.regex.Matcher; import java.util.regex.Pattern; /** * @author lei * 2011-9-2 */ publ ...

  7. 如何为Rails作贡献:例增加rich_text field generators

    如何为Rails作贡献 例增加rich_text field generators 下载https://github.com/rails/rails 打开atom,在 rails/railties/l ...

  8. oracle 夸服务器、数据库查询

      create public database link 连接名 connect to 需要连接数据库名 identified by  需要连接数据库密码 USING '(DESCRIPTION = ...

  9. 局域网内Ping不通

    局域网ping不通, 原来不可忽视这步......... 通常,经常在局域网里面,为了检测网络是否顺畅,都会ping一下IP,如果网络正常,就可以上网或者远程处理其他故障.但是会出现ping别人的主机 ...

  10. Objective-C基础教程 笔记

    一.对C的扩展 1. #import VS #include C语言使用#include语句通知编译器应在头文件中查询定义. OC中也可以使用#include,但几乎不这么用,而是使用#import. ...