-_-#【响应式】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 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...
随机推荐
- skip-grant-tables
1.net stop mysql 2.my.ini中[mysqld]plugin_dir的下面增加skip-grant-tables 3.net start mysql 4.在Navicat中打开my ...
- Lucida Grande字体无法正常显示冒号的解决方案
曾经贪图Mac OSX的UI漂亮,后来查到它用的是Lucida Grande字体,所以索性将win7也改成了那种字体,结果浏览器中的中文冒号全都显示为一个奇怪的符号.后来即使将字体设置回去也无法还原. ...
- javascript类继承系列二（原型链）
原型链是采用最主要的继承方式,原理:每一个类(构造器,js中的function)都有一个原型属性(prototype)指向一个原型对象,原型对象有一个构造器(constructor),它又指回到fun ...
- SQL Server备份还原数据库中的小把戏
备份数据库时出现一个不太了解的错误 ,错误信息“is formatted to support 1 media families, but 2 media families are expected ...
- 【html】【1】html的简单结构
1>我们为什么能打开html网页 计算机本身有个配置文件后缀打开程序的默认,好比:.txt =>记事本打开 html=>浏览器打开 文件一切的鼻祖都起源于.txt文件,你只要修改 ...
- 类库探源——System.Environment
Environment 类: 提供有关当前环境和平台的信息以及操作它们的方法.此类不能被继承. 命名空间: System 程序集: mscorlib.dll 继承关系: 常用属性(字段)和方法: ...
- codevs 4511 信息传递(NOIP2015 day1 T2)
4511 信息传递 NOIP2015 day1 T2 时间限制: 1 s 空间限制: 128000 KB 传送门 题目描述 Description 有个同学(编号为 1 到)正在玩一个信息传递的游戏. ...
- C++线程类的封装
简单的C++线程操作的封装,使用了智能指针管理对象的释放. 可运行对象基类 class SimpleRunable:public RefCountedBase { public: SimpleRuna ...
- 弹出对话框 UIAlertController
双选 //实例化UIAlertController var av=UIAlertController(title: "
- Faces.JavaServer Pages（JSP）
zhengly.cn atitit.Servlet2.5 Servlet 3.0 新特性 jsp2.0 jsp2.1 jsp2.2新特性 1.1. Servlet和JSP规范版本对应关系:1 1.2. ...