window.matchMedia() allow to listen to browser window size changes and trigger the callback for different media query size.

let mql = window.matchMedia('(max-width: 600px)');

you can attach a listener to it:

mql.addListener(() => console.log('changes'));

So when the window size is smaller than 600px, it matches is true otherwise is false.

When you resize the window, it will log out "changes" in console.

[Javascript] Window.matchMedia()的更多相关文章

  1. JavaScript Window 对象

    < JavaScript Window Object > && < IE check > JavaScript Window Object Window.loa ...

  2. JavaScript window

    window -- window对象是BOM中所有对象的核心 window,中文"窗口" window对象除了是BOM中所有对象的父对象外,还包含一些窗口控制函数 全局的windo ...

  3. JavaScript window.open()属性

    一. Window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架. Window 对象会在 <body> 或 < ...

  4. JavaScript window.location对象

    JavaScript window.location对象   示例 注意 方法 经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询. 示例 URL:http://b. ...

  5. javascript:window.history.forward(1);

    javascript:window.history.forward(1);[转] 接下来我们要讨论的方法以后退按钮本身为中心,而不是浏览器缓存.这儿有一篇文章Rewiring the Back But ...

  6. JavaScript window.onload 事件和 jQuery ready 函数有何不同?

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  7. Javascript Window Location

    window.location 对象在编写时可不使用 window 这个前缀. URL : 统一资源定位符 (Uniform Resource Locator) 说明: 完整的URL示例:scheme ...

  8. javascript Window对象 第16节

    <html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...

  9. JavaScript Window - 浏览器对象模型

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚 ...

随机推荐

  1. 2019-7-19 包、logging模块、hashlib(加密模块)、openpyxl模块、深浅拷贝

    一.包 什么是包: 它是一系列模块文件的结合体,表示形式就是一个文件夹.该文件内部通常会有一个__init__.py文件,包的本质还是一个模块,可以被调用,调包就相当于与调用__init__.py文件 ...

  2. Scala 安装 Scala for Eclipse安装及运行hello word

    Scala下载安装地址:https://www.scala-lang.org/download/ .windows版本的安装包是scala-2.12.8.msi.直接滑动到网页最下面,下载对应的系统的 ...

  3. 【EBS】XLA_GLT表的清理

    一.Xla_glt*在出现在日记账导入中的阶段 与R11使用gl_interface表不同,R12中大部分情况下使用的是XLA_GLT_<groupId>表:子帐传送到总账的过程中,会动态 ...

  4. 挂载一个NFS共享

    在 system2 上挂载一个来自 system1.group8.example.com 的NFS共享,并符合下列要求: 1./public 挂载在下面的目录上 /mnt/nfsmount 2./pr ...

  5. git 学习笔记 -- 创建标签

    在Git中打标签非常简单,首先,切换到需要打标签的分支上: $ git branch * dev master $ git checkout master Switched to branch 'ma ...

  6. Scala 系列(七)—— 常用集合类型之 Map & Tuple

    一.映射(Map) 1.1 构造Map // 初始化一个空 map val scores01 = new HashMap[String, Int] // 从指定的值初始化 Map(方式一) val s ...

  7. java反射 详解!!!!

    java反射(特别通俗易懂) 反射是框架设计的灵魂 (使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码)) 一.反射的概述 JAVA反射机制是在运行状态 ...

  8. 在eclipse下给android应用添加jar包

    右键工程,Build path,java build path,选择libraries在右边的按钮中点击“Add Library”选择“User library”,点击“下一步”点击“User lib ...

  9. 巧用浏览器F12调试器定位系统前后端bug-转载

    做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器. httpwat ...

  10. css浮动float详解

    https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html