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. JavaSE面试题:类初始化和实例初始化等

    类初始化过程 1.一个类要创建实例需要先加载并初始化该类 main方法所在的类需要先加载和初始化 2.一个子类要初始化需要先初始化父类 3.一个类初始化就是执行<clinit>()方法 & ...

  2. LeetCode第154场周赛(Java)

    估计要刷很久才能突破三道题了.还是刷的太少.尽管对了前两题,但是我觉得写的不怎么样.还是将所有题目都写一下吧. 5189. "气球" 的最大数量 题目比较简单.就是找出一个字符串中 ...

  3. 有些CCS工程中为什么会有两个CMD文件?

    这里的CCS就是TI公司的Code Composer Studio 集成开发环境,所以这篇随笔也就是关于TI公司DSP开发过程中对于刚入门同学的一个常见问题了. 那作为一个初学者,对于CCS工程中的c ...

  4. 【leetcode-97 动态规划】 交错字符串

    (1过,调试很久) 给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的. 示例 1: 输入: s1 = "aabcc", s2 = " ...

  5. tkinter基础-输入框、文本框

    本节内容 了解输入框.文本框的使用方法 利用1制作简易界面 首先明确上面由几个元素组成:该界面由界面标题,输入框.两个按钮.文本框组成. 该界面我们需要实现的功能: 在输入框中输入文字,点击inser ...

  6. .net Dapper 实践系列(3) ---数据显示(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 产生问题 解决方案 写在前面 上一小节,我们使用Dapper 里事务实现了一对多关系的添加.这一小节,主要记录如何使用Dapper 实现多表的查询显示. 产生问题 在mvc控制器中查询 ...

  7. flask 与 SQLAlchemy的使用

    flask 与 SQLAlchemy的使用 安装模块 pip install flask-sqlalchemy 在单个python中与flask使用 # 文件名:manage.py from flas ...

  8. pandas-11 TypeError: ufunc 'isnan' not supported for the input types, and the inputs could not be safely错误解决方法

    pandas-11 TypeError: ufunc 'isnan' not supported for the input types, and the inputs could not be sa ...

  9. 获取form表单默认提交的返回值

    1.经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并 ...

  10. 英文FRAUNCE法国FRAUNCE单词

    France Alternative forms Fraunce In Fraunce, the inhabitants of one city were driven out and forced ...