谈谈响应式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. jquery ajax获取和解析数据

    最近项目中用到了ajax技术,之前虽然写过一点点,但是没有系统的总结过.趁着刚刚用过,手热就记录一下,方便以后查阅. $.ajax中的参数 $.ajax的函数格式: $.ajax({ type: 'P ...

  2. Ganglia3.6.0，nginx+php搭建gweb，监控Hadoop2.2 和 Hbase0.98.1

    环境:CentOS6.5 Hadoop2.2.0 Hbase0.98.1 服务端(master): 安装 ganglia ganglia-devel ganglia-gmetad ganglia-gm ...

  3. Sql Xml

    /* sql xml 入门: --by jinjazz --http://blog.csdn.net/jinjazz 1.xml: 能认识元素.属性和值 2.xpath: 寻址语言,类似windows ...

  4. HTML5教程：课时一HTML简介

    一.HTML5新特性 1.HTML5多媒体:标签:视频<video>  :音频<audio> 2.HTML5应用:  本地数据存储:访问本地文件: 本地SQL数据:缓存引用: ...

  5. C++资源之不完全导引 (转载)

    C++资源之不完全导引(完整版)- - 这文章太强了,我一定要转载,否则对不起观众,对不起自己.(liigo) 发信人: NULLNULL (空空), 信区: VC标  题: C++资源之不完全导引( ...

  6. EF+WCF怎样更新数据?

    public virtual void Update(T entity) { T current = this.Where(m => m.Id.Equals(entity.Id)) .Singl ...

  7. Android2.2 API —— ImageView

    注意 请查看本文后期更新完整版: http://www.cnblogs.com/over140/archive/2011/06/08/2075054.html 来源: 农民伯伯: http://www ...

  8. Google开源库-Volley

    Android平台的网络通信库,使是网通信 更快,更简单,更健壮 适合场景: 数据量不大,通信 频繁. 大数据,流媒体是不适合使用的 * 它主要是帮我们载入和缓存从远程网络加载的图片    * 所有的 ...

  9. 为何要fork()两次来避免产生僵尸进程??

    最近安装书上说的,开始搞多进程了..看到了一个好帖子,学习学习 http://blog.sina.com.cn/s/blog_9f1496990100y420.html 首先我们要明白,为什么要避免僵 ...

  10. SpringMVC源码阅读（二）

    今天分析下ViewResolver和View的实现  下面是ModelAndView的实现 package org.springframework.web.servlet; import java.u ...