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. 宝塔linux定时任务设置

    选择shell脚本选择执行周期在脚本内容内写入 curl -sS --connect-timeout 10 -m 60 '此处为地址链接';如下图所示:  

  2. Android apk逆向:反编译,回编译,签名,打包。

    Android apk逆向:反编译,回编译,签名,打包流程. 第一步: apk 反编译. 1) 打开命令行窗口,输入java -version, 检测当前java版本,若版本较低, 则下载JAVA S ...

  3. 使用canvas实现360水球波动

    代码如下: <!DOCTYPE html> <html lang="en">  <head>    <meta charset=" ...

  4. 解决打开IE报错“无法启动...丢失api-ms-win-core-path-l1-1-0.dll”的问题

    打开IE突然发现报错 试了各种方法都不行 最终看这篇文章,才解决:https://www.yijile.com/log/577.html 打开IE设置选项,选择管理加载项,如图讲该选项禁用,就不报错. ...

  5. Net Core 自定义 Middleware 加密解密

    前言:第一次写文章,有问题请轻喷 当前使用 Net Core 版本 2.1.3 我们经常在开发中需要把实体的主键 Id 传输到前端,但是在Get的时候又不想让前端能看到明文,我们通常会加密这些数据,所 ...

  6. JQuey中ready()的4种写法

    在jQuery中,对于ready()方法,共有4种写法: (1)写法一: $(document).ready(functin(){ //代码部分 }) 分析:这种代码形式是最常见的,其中$(docum ...

  7. Java 之 Servlet的urlPartten

    Servlet 的 urlpartten urlpartten:Servlet 访问路径 1.一个 Servlet 可以定义多个访问路径,在使用@WebServlet注解时,可以发现里面的 urlpa ...

  8. springmvc与struts2

    1. springmvc的入口是一个servlet即前端控制器,而struts2入口是一个filter过虑器. 2. springmvc是基于方法开发(一个url对应一个方法),请求参数传递到方法的形 ...

  9. ResourceDictionary文件排序方法

    默认生成的ResourceDictionary文件是根据主键的hashcode排序生成的,如果想按主键排序生成是不可能的. 可以使用Xml的处理方法来生成ResourceDictionary文件. 1 ...

  10. JavaWeb项目目录结构

    今天本来是准备学习spring mvc + mybatis,结果被idea的配置环境卡主了,自己刚刚接触JavaWeb不久,所以浪费了很多时间.最终我回归最简单的servlet & jsp,并 ...