enquire.js-响应css媒体查询的轻量级javascript库
轻量,没有依赖。
安装: 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库的更多相关文章
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- CSS 媒体查询 响应式
媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
- css媒体查询:响应式网站
css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)
什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...
- CSS媒体查询及其使用
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- css媒体查询aspect-ratio宽高比在less中的使用
css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...
随机推荐
- Spring循环依赖问题
什么是循环依赖? 循环依赖就是循环引用,指两个或多个bean互相持有对方,比如说TestA引用TestB.TestB引用TestA,最终形成一个闭环. 注意:循环依赖不是指循环调用. 循环调用:指方法 ...
- 在 Laravel 项目中使用 Elasticsearch 做引擎,scout 全文搜索(小白出品, 绝对白话)
项目中需要搜索, 所以从零开始学习大家都在用的搜索神器 elasiticsearch. 刚开始 google 的时候, 搜到好多经验贴和视频(中文的, 英文的), 但是由于是第一次接触, 一点概念都没 ...
- ArcGIS Pro开发Web3D应用(2)——地图分屏对比(多屏对比)思路
很多应用中都需要用到地图联动.多屏对比.二三维分屏.大屏显示,有图形可视化的地方就有事件响应触发:鼠标按下.移动.鼠标滚轮,由此触发了地图上坐标或范围的变化,将这些变化发送给另一个地图并响应这些变化, ...
- js switch 用法
//获取星期 //例子1 var day=new Date().getDay(); switch (day) { : x="Today it's Saturday"; break; ...
- Axure下拉列表的交互事件 + 自定义元件库
下拉列表的交互事件: 场景:当点击第一个下拉列表框的江苏时,第二个列表框会显示江苏省的城市:当点击第一个下拉列表框的北京时,第二个列表框会显示北京市的区 操作:把第二个列表框设置为动态面板,设置为两种 ...
- 【转载】BlockingQueue
前言: 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便 ...
- Python第三方库的安装 --Python3
1.使用安装包管理工具安装:easy_install .pip/pip3 easy_install:easy_install是由PEAK(Python Enterprise Application K ...
- widerface---VOC
import os, h5py, cv2, sys, shutil import numpy as np from xml.dom.minidom import Document rootdir = ...
- Adobe Photoshop安装
Photoshop cc2018安装 Adobe 软件套装已不再以 (Creative Suite) CS命名,而是改成 (Creative Cloud) CC,主推云服务!Adobe CC 套装中总 ...
- getter unddfined
今天用vue.js写代码 报错: getter unddfined 错误原因:没有在main.js中注册store