enquire.js 是轻量级,纯 JavaScript 实现的 CSS 媒体查询库:
JavaScript 回调媒体查询,匹配或者不匹配
干净直观的 API
超轻量级 —— 大约 0.8kb minified & gzipped!
完全无依赖,甚至是 jQuery。
简单使用:
enquire.register("screen and (max-width:45em)", { // OPTIONAL // If supplied, triggered when a media query matches. match : function() {}, // OPTIONAL // If supplied, triggered when the media query transitions // *from a matched state to an unmatched state*. unmatch : function() {}, // OPTIONAL // If supplied, triggered once, when the handler is registered. setup : function() {}, // OPTIONAL, defaults to false // If set to true, defers execution of the setup function // until the first time the media query is matched deferSetup : true, // OPTIONAL // If supplied, triggered when handler is unregistered. // Place cleanup code here destroy : function() {} });
一段时间以来,我一直在使用enquire.js库来增强JavaScript中媒体查询的使用。 我在各种项目中使用该库取得了许多成功,但是我遇到的大多数开发人员都承认他们从未使用过,甚至从未听说过它。 在本文中,我想向您介绍该库,解释为什么以及如何使用它。 什么是enquire.js? enquire.js是一个轻量级的纯JavaScript库,用于响应CSS媒体查询。 用我自己的话说,在JavaS
enquire.js 详细介绍 enquire.js 是轻量级,纯 JavaScript 实现的 CSS 媒体查询库: JavaScript 回调媒体查询,匹配或者不匹配 干净直观的 API 超轻量级 —— 大约 0.8kb minified & gzipped! 完全无依赖,甚至是 jQuery。 简单使用: enquire.register("screen and (max-width:
轻量,没有依赖。 安装: npm install enquire.js API: enquire.register(mediaQuery, handler). mediaQuery: 字符串,需要响应的媒体。 handler: 函数或对象, enquire.unregister(mediaQuery[, handler]) mediaQuery: 字符串,需要注销响
cnpm install enquire.js --save或 cnpm install enquire.js --save 创建device.js import enquireJs from 'enquire.js' export const DEVICE_TYPE = { DESKTOP: 'desktop', TABLET: 'tablet', MOBILE: 'mobile'
$(window).on('load', function () { $(window).trigger('resize'); }); $(function () { var $window = $(window), isLoaded = false; function resizeBg() { var winWidth = $window.width(),
vue -V或者是vue --version查询的是vue-cli的版本,也就是vue脚手架的版本。 如果想要查看vue的版本,直接去项目中,在根目录下,找到package.json文件夹 找"dependencies",然后就可以看到你装的vue的版本了 "dependencies": { "@antv/data-set": "^0.11.4", "@form-create/a
主要内容:1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不
响应式网站设计只有弹性布局这一个技巧是不够用的,媒体查询( media queries )也是响应式设计的核心技巧之一。媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器,我们可以根据设备呈现内容的特点轻松更改样式,包括显示屏类型、宽度、高度、方向甚至是分辨率。 在 CSS2.1 中定义了媒体类型,通过给 元素添加 media 属性,可以为不同的媒体类型加载不同的样式表。 <link r
在早些时候,为了满足移动用户的需求,需要为移动设备专门建立一个额外的网站。随着响应式设计的出现,这种做法已经越来越少见了。 2010年5月25日,Ethan Marcotte在A List Apart上发表了一篇开创性的文章,在这篇名为Responsive Web Design的文章中,他将媒体查询、弹性网格布局、弹性图片这三种已有的开发技术整合起来,并命名为响应式Web设计(RWD,Respon
问题内容: 默认情况下,我想给我的body元素添加绿色边框。在支持视网膜显示的设备上,我要首先检查尺寸。在ipad上,我想给我的身体一个红色边框,在iphone上,我想给它一个蓝色边框。但是像这样嵌套媒体查询是行不通的: 问题答案: 否。您需要使用运算符并将其写为两个查询。但是,您可以在将编译为CSS的SCSS中执行此操作,但是它将通过展开它们并使用运算符将它们组合在一起。 这是一个普遍的问题,一
本文向大家介绍twitter-bootstrap 媒体查询,包括了twitter-bootstrap 媒体查询的使用技巧和注意事项,需要的朋友参考一下 示例 Bootstrap中的媒体查询允许您根据视口大小移动,显示和隐藏内容。在LESS文件中,使用以下媒体查询在Bootstrap网格系统中创建关键断点: 有时这些扩展为包括最大宽度,以将CSS限制为较窄的设备集:
在这本书中,我想要把主要精力都集中在讲解Sass的基础使用,和证明Sass并不会和你的工作流程脱节。但在最后一章中,我想讨论一些使用Sass结合媒体查询的高级技术和一些我每天工作中用到的将复杂CSS简化的例子。 只要你能想到的,Sass就可以办到。使用变量和一些mixin会让你的生活变得更轻松。如果你想的话,Sass完全不局限于这些简单的功能。下面这个例子再一次举重若轻的展示了Sass的建立兼容高
CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。 媒体查询可用于检
问题内容: iPhone 5的屏幕更长,无法捕捉到我网站的移动视图。iPhone 5新增了哪些响应式设计查询,可以与现有iPhone查询结合使用吗? 我当前的媒体查询是这样的: 问题答案: 另一个有用的媒体功能是。 请注意, iPhone 5没有16:9的宽高比 。实际上是40:71。 iPhone <5: iphone 5: iPhone 6: iPhone 6 Plus: iPad: