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

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

you can attach a listener to it:

  1. 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. F1 相似查找字段存在的table

    REPORT ZME12_BDC1. *REPORT demo_select_dynamic_conditions . TABLES: makt,dd02t,marc. TYPE-POOLS : AB ...

  2. elasticsearch插件

    bigdisk安装: 1.下载地址http://bigdesk.org/,注意和elasticsearch的版本对应关系 2.将文件上传到服务器elasticsearch的plugin目录下,解压 3 ...

  3. installer

    if (args.Length == 0) { ServiceBase[] ServicesToRun; ServicesToRun = new ServiceBase[] { new MyServi ...

  4. Django之创建超级用户

    本文链接来自:https://blog.csdn.net/HuaCode/article/details/79721673 首选创建一个新用户,用来登录Django管理网站,进入manage.py目录 ...

  5. 最全的 pip 使用指南,50% 你可能没用过

    所有的 Python 开发者都清楚,Python 之所以如此受欢迎,能够在众多高级语言中,脱颖而出,除了语法简单,上手容易之外,更多还要归功于 Python 生态的完备,有数以万计的 Python 爱 ...

  6. pandas-06 Series和Dataframe的排序操作

    pandas-06 Series和Dataframe的排序操作 对pandas中的Series和Dataframe进行排序,主要使用sort_values()和sort_index(). DataFr ...

  7. GridPanel列头带有复选框的列

    由于工作需要,封装了ExtJS4,GridPanel列头带有复选框的列, 代码如下: /** * 列头带有复选框的列 * */ Ext.define("org.pine.widget.Che ...

  8. SpringMVC+SpringBoot+MyBatis

    一.在框架中有时候会发现dao层和service层是相同的代码,为什么会同时存在呢?(以下https://blog.csdn.net/fanjieshanghai/article/details/88 ...

  9. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  10. Android Scroller详解

    在学习使用Scroller之前,需要明白scrollTo().scrollBy()方法. 一.View的scrollTo().scrollBy() scrollTo.scrollBy方法是View中的 ...