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. 抽象工厂(AbstractFactory)模式

    抽象工厂模式又称工具箱模式.其实抽象工厂模式可以简单的理解为一个工厂生成一个产品族的产品. 抽象工厂模式可以向客户端提供一个接口,使得客户端在不指定产品的具体类型的情况下,创建多个产品族中的产品对象. ...

  2. linux 压缩文件 查找

    zgrep '20190521155553776237' stdout-20190521.log.gz

  3. thinkphp 5.0.24 配置多模块注意的细节

    /*index.php 文件  这一段用于生成模块用 build.php 只能生成诸如 admin hotel 开头为小写字母的模块 如果你设定的 大写开头 如 Hotel Admin 系统就会找不到 ...

  4. Codeforces Round #580 (Div. 1) A-E

    Contest Page A Tag:构造 将$a_i$看做一个无穷数列,$i > 2n$时$a_i = a_{i - 2n}$.设$sgn_i = \sum\limits_{j=i+1}^{i ...

  5. python ---升级所有安装过的package

    # -*- coding:utf8 -*- import pip from subprocess import call from pip._internal.utils.misc import ge ...

  6. Springcloud的版本依赖问题(最全,包含springCloud所有的版本)

    版权声明:本文为博主原创文章,遵循CC 4.0 BY版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_42105629/article/detai ...

  7. MOOC 数据库笔记(三):关系模型之基本概念

    关系模型的基本概念 关系模型简述 1.最早由E.F.Codd在1970年提出. 2.是从表(Table)及表的处理方式中抽象出来的,是在对传统表及其操作进行数学化严格定义的基础上,引入集合理论与逻辑学 ...

  8. C#泛型集合之——字典

    字典基础 1.概述:字典是一组映射,更准确的说应该是一个函数.因为它的键值不能重复,而值可以重复.其逻辑实质也是顺序型的 2.操作: (1)创建: Dictionary<键类型,值类型> ...

  9. AWS成本估算的相关小工具

    1.AWS-partner :云势数据做的在线小工具,有微信版本可以使用,但是涉及的服务很少,更新慢,型号缺,界面不友好.不是很理想,连接如下:     https://www.goclouds.cn ...

  10. P1347 排序 (拓扑排序,tarjan)

    题目 P1347 排序 解析 打开一看拓扑排序,要判环. 三种情况 有环(存在矛盾) 没环但在拓扑排序时存在有两个及以上的点入度为0(关系无法确定) 除了上两种情况(关系可确定) 本来懒了一下,直接在 ...