谈谈响应式Javascript

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div id="myDiv"></div>

    <script>

        var result = window.matchMedia("(min-width: 600px)")

        console.log(result)

        result.addListener(sizeChange)

        function sizeChange(r) {

            console.log(r)

            var v = document.getElementById("myDiv")

            if (r.matches) {

                v.innerHTML = "getting big" + "<br>" + result.media

            } else {

                v.innerHTML = "getting small" + "<br>" + result.media

            }

        }

        sizeChange(result)

    </script>

</body>

</html>

-_-#【响应式】matchMedia的更多相关文章

  1. bootstrap_栅格系统_响应式工具_源码分析

    -----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高 ...

  2. 响应式Web

    响应式布局的核心是:适配不同视口大小的流式布局. RWD和AWD RWD:Responsive Web Design AWD:Adaptive Web Design 实现RWD,多使用流式布局.针对所 ...

  3. bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图

    响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...

  4. iOS开发--Swift RAC响应式编程初探

    时间不是很充足, 先少说点, RAC的好处是响应式编程, 不需要自己去设置代理委托, target, 而是主要以信息流(signal), block为主, 看到这里激动吧, 它可以帮你监听你的事件, ...

  5. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  6. Unity基于响应式编程(Reactive programming)入门

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  7. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  8. Paip.Php Java 异步编程。推模型与拉模型。响应式（Reactive）”编程FutureData总结... 1

    Paip.Php  Java 异步编程.推模型与拉模型.响应式(Reactive)"编程FutureData总结... 1.1.1       异步调用的实现以及角色(:调用者 提货单) F ...

  9. Vue.2.0.5-深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...

随机推荐

  1. Java实现微信菜单json字符串拼接

    Java实现微信菜单json字符串拼接 微信菜单拼接json字符串方法 >>>>>>>>>>>>>>>> ...

  2. 学习微信小程序之css14浮动的特性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Spring入门Hello World

    这里是关于Hello World的一些基本的操作 Spring 是一个重量级的容器框架,用来配置bean并维护bean之间的关系的框架 想要最初的使用Spring就要学会最基本的配置 <1> ...

  4. ArcGIS 设置地图显示范围大小

    Arcmap的FullExtent默认是地图加载的时候的extent.其实这个fullExtent是可以设置的. 打开ArcMap,选择左边图例的Layers ,右键点击,选择“Properties. ...

  5. MVC创建通用DropdownList

    起因 MVC项目中有数据字典表,定义了多个类型,需要给每个类型做下拉菜单. 不可能每个类型,都敲一个代码,需要做成通用 思路 利用MVC的部件方式,分别定义Controller,View和Model: ...

  6. SQL Server数据类型

    转载:http://www.ezloo.com/2008/10/sql_server_data_type.html    数据类型是数据的一种属性,是数据所表示信息的类型.任何一种语言都有它自己所固有 ...

  7. Linux同步时间命令ntpdate

    转自:http://orgcent.com/linux-ntpdate/ 由于要同步Linux服务器的时间,为了保证时间的高度准确性,放弃date命令而转向ntpdate(同步时间命令). 方案如下: ...

  8. 消除热块（hot block）

    上篇日志提到了,那么高的负载,是存在数据块读竞争,下面介绍几个方法来消除块竟争 查找块竟争 SELECT p1 "file#", p2 "block#", p3 ...

  9. angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2

    工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...

  10. 视频处理简单实例 ［OpenCV 笔记2］

    VideoCapture是OpenCV 2.X中新增的类,提供从摄像机或视频文件捕获视频的C++接口.利用它读入视频的方法一般有两种: // method 1 VideoCapture capture ...