-_-#【响应式】matchMedia
<!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的更多相关文章
- bootstrap_栅格系统_响应式工具_源码分析
-----------------------------------------------------------------------------margin 为负 使盒子重叠 等高 等高 ...
- 响应式Web
响应式布局的核心是:适配不同视口大小的流式布局. RWD和AWD RWD:Responsive Web Design AWD:Adaptive Web Design 实现RWD,多使用流式布局.针对所 ...
- bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图
响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...
- iOS开发--Swift RAC响应式编程初探
时间不是很充足, 先少说点, RAC的好处是响应式编程, 不需要自己去设置代理委托, target, 而是主要以信息流(signal), block为主, 看到这里激动吧, 它可以帮你监听你的事件, ...
- 响应式Web初级入门
本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...
- Unity基于响应式编程(Reactive programming)入门
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- Paip.Php Java 异步编程。推模型与拉模型。响应式（Reactive）”编程FutureData总结... 1
Paip.Php Java 异步编程.推模型与拉模型.响应式(Reactive)"编程FutureData总结... 1.1.1 异步调用的实现以及角色(:调用者 提货单) F ...
- Vue.2.0.5-深入响应式原理
大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...
随机推荐
- C语言基础知识小总结(2)
上个总结比较笼统,下面写的稍微详细点吧算是. 一.控制台屏幕打印 1.putchar(); 格式: void putchar(char c); //直接把一个字符输出到屏幕上 2.print ...
- 25、Javascript 事件
Javascript 事件 是指 Javascript 捕获到用户的操作,并做出正确的相应. Javascript 事件一般与DOM元素绑定. Javascript处理事件的基本机制 1.对DOM元素 ...
- Oracle 11g服务
成功安装Oracle 11g后,共有7个服务, 这七个服务的含义分别为: 1. Oracle ORCL VSS Writer Service: Oracle卷映射拷贝写入服务,VSS(Volume S ...
- Nodejs异步流程控制Async
http://www.cnblogs.com/huair_12/p/4117351.html 很好的总结 关联下 以便以后学习使用
- 反射（学习整理）----Class类和加载器ClassLoader类的整理
1.学习反射的时整理的笔记!Class类和ClassLoader类的简单介绍 反射机制中的Class Class内部到底有什么呢?看下图! 代码: Class cls=Person.class; .C ...
- Ubuntu1404+Django1.9+Apache2.4部署配置2配置文件设置
转载注明出处,个人博客:http://www.cnblogs.com/wdfwolf3/ Django首要的部署平台是WSGI,它是Python Web服务器和应用的标准.使用Apache和mod_w ...
- 24种设计模式--门面模式【Facade Pattern】
大家都写过纸质的信件吧,比如给女朋友写情书什么的,写信的过程大家都还记得吧,先写信的内容,然后写信封,把信放到信封中,封好,投递到信箱中进行邮递,这个过程还是比较简单的,虽然简单,这四个步骤都是要跑的 ...
- gridview列前加复选框需要注意的一点
前言 获取gridview每一列前面的复选框,然后获取选中的这一行的id.aspx页面,我不喜欢用这个,有的公司用自己封装的,基本上都是用封装的,这是我知道的.也有用Repeater的.可能是因为gr ...
- Bayeux协议
Bayeux 协议-- Bayeux 1.0草案1 本备忘录状态 This document specifies a protocol for the Internet community, and ...
- 0xc000000f: Error attempting to read the boot configuration data
Get the fix to “0xc000000f: error attempting to read the boot configuration data” boot error for Win ...