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. shared_ptr 用法

    引入 shared_ptr 是c++为了提高安全性而添加的智能指针,方便了内存管理. 特点 shared_ptr 是通过指针保持对象共享所有权的智能指针.多个 shared_ptr 对象可占有同一对象 ...

  2. day02——while、字符串格式化、运算符、编码初识

    day02 while--关键字(死循环) 格式:while 条件: ​ 循环体 print(1) while True: print("痒") print("鸡你太美& ...

  3. 数据采集,SCADA, 使用MQTT的方式来进行消息单/双向传输,什么场景使用MQTT

    1.先来了解下: 看完得出关键字:发布.订阅模式,事件驱动,主题,生产与消费解耦 2.轻量级 普通的socket连接对服务器的消耗太大了,socket服务端是很消耗资源的,一台服务器能链接的客户端是有 ...

  4. 在local模式下的spark程序打包到集群上运行

    一.前期准备 前期的环境准备,在Linux系统下要有Hadoop系统,spark伪分布式或者分布式,具体的教程可以查阅我的这两篇博客: Hadoop2.0伪分布式平台环境搭建 Spark2.4.0伪分 ...

  5. idea 添加 VUE 的语法

    1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...

  6. java基础 String

    标准格式:数据类型[] 数组名称 = new 数据类型[] {元素1,元素2,...};省略格式:数据类型[] 数组名称 = {元素1,元素2,...}; Scanner类实现的功能,可以实现键盘输入 ...

  7. (转)Python_如何把Python脚本导出为exe程序

    原文地址:https://www.cnblogs.com/robinunix/p/8426832.html 一.pyinstaller简介 Python是一个脚本语言,被解释器解释执行.它的发布方式: ...

  8. win10 mars xlog编译

    win10 mars xlog编译   一. 环境准备 安装 cmake 以及 python2.7, 以及下载 ndk-r16b,并配置环境变量 NDK_ROOT 指向 ndk 路径. 如果是 Win ...

  9. 换个语言学一下 Golang (9)——结构体和接口

    基本上到这里的时候,就是上了一个台阶了.Go的精华特点即将展开. 结构体定义 上面我们说过Go的指针和C的不同,结构体也是一样的.Go是一门删繁就简的语言,一切令人困惑的特性都必须去掉. 简单来讲,G ...

  10. Flask框架 请求与响应 & 模板语法

    目录 Flask框架 请求与响应 & 模板语法 简单了解Flask框架 Flask 框架 与 Django 框架对比 简单使用Flask提供服务 Flask 中的 Response(响应) F ...