谈谈响应式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. 调试php的soapCient

    try { import('@.Ext.xml'); header("Content-Type:text/html; charset=utf-8"); $soap = new So ...

  2. 大数据应用：五大地区喜新厌旧游戏APP类别之比较与分析

    今天,我们来分享点不一样的资讯.....游戏APP之喜新厌旧排行榜!! 前阵子笔者开发了一套系统可以用来收集亚洲五大地区上架APP的每日排名信息,希望观察出五大地区在APP上的喜好和使用程度之间的相异 ...

  3. javascript 定时器使用

    定时器的使用场合 setInterval() 方法,按照指定的周期(以毫秒记)来调用函数或计算表达式setInterval() 方法会不停的调用函数,知道 clearInterval() 被调用或窗口 ...

  4. Android 网络视频播放器

    项目概要: 1.登录界面 2.播放列表 3.播放界面

  5. 不安装oracle客户端，连接到服务器的oracle (注：针对 odp.net)

    前几天在研究怎样不安装oracle客户端去访问oracle,并把里面的数据同步到本地的Sql Server数据库中. 准备工作:首先你得有如下.dll,我这个是针对oracle10g的,如果是更高的版 ...

  6. iOS RegexKitLite的使用以及常用的正则表达式

    1.去RegexKitLite下载类库,解压出来会有一个例子包及2个文件,其实用到的就这2个文件,添加到工程中. 2.工程中添加libicucore.dylib frameworks. 3.现在所有的 ...

  7. 生产者与消费者（三）---BlockingQueue

    前面阐述了实现生产者与消费者问题的两种方式:wait() / notify()方法 和 await() / signal()方法,本文继续阐述多线程的经典问题---生产者与消费者的第三种方式:Bloc ...

  8. 输出第N个素数

    输出第N个素数 public class FindNthPrime { public static void main(String[] args){ int N = Integer.parseInt ...

  9. 中国天气网接口返回json格式分析及接口（XML、图片接口）说明

    实时天气: city        "北京"//城市 cityid      "101010100"//城市编码 temp        "17&qu ...

  10. HDU 5726 GCD （2016 Multi-University Training Contest 1）

      Time Limit: 5000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Description Give y ...