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. BJFU-216-基于链式存储结构的图书信息表的修改

    #include<stdio.h> #include<stdlib.h> #define MAX 100 typedef struct Book{ double no; cha ...

  2. 利用MySQL存储过程批量插入100W条测试数据

    DROP PROCEDURE IF EXISTS insert_batch; CREATE PROCEDURE insert_batch() BEGIN ; loopname:LOOP '); ; T ...

  3. 玩机之HUAWEI_Nova

    Nova是一款挺早的机型了.最开始使用华为就觉得这一款最好挺好用,屏幕小巧功能强大.当然也离不开手机,最早的TWRP就是在此机型上初步尝试成功,也算学习,那时候还没有玩过.这部手机算是改机最完美的一部 ...

  4. C# 截取字符串方法总结

    第一种:根据单个分隔字符用split截取 string st="GT123_1"; string[] sArray=st.split("_"); //即可得到s ...

  5. C# vb .net实现相机视图效果滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的相机视图效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  6. swagger list Could not resolve reference because of: Could not resolve point

    swagger list Could not resolve reference because of: Could not resolve point controller的参数要加   @Requ ...

  7. 【开发笔记】- 永远不要在MySQL中使用UTF-8

    原文地址:https://mp.weixin.qq.com/s/I3Tkvn8vSyC5lEpD9HzwiA 最近我遇到了一个bug,我试着通过Rails在以“utf8”编码的MariaDB中保存一个 ...

  8. slf4j的正确使用

    头两天领导分配个任务是要把项目中所有try catch里的异常处理收集到elk中,由于之前的处理方式五花八门,就集中处理了下, 事后还被批评了. 不是所有的异常信息都需要被记录到log中 使用SLF4 ...

  9. python关于try except的使用方法

    一.常见错误总结 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x IOError 输入/输出异常;基本上是无法打开文件 ImportError 无法引入 ...

  10. idea忽略并隐藏.idea文件夹.iml文件不提交到svn

    File-->setting-->Editor-->File Types 选中.boringignore,添加*.iml;.idea;即可