window.matchMedia()

基本用法

window.matchMedia方法用来检查CSS的mediaQuery语句。各种浏览器的最新版本(包括IE 10+)都支持该方法,对于不支持该方法的老式浏览器,可以使用第三方函数库matchMedia.js

CSS的mediaQuery语句有点像if语句,只要显示媒介(包括浏览器和屏幕等)满足mediaQuery语句设定的条件,就会执行区块内部的语句。下面是mediaQuery语句的一个例子。

@media all and (max-width: 700px) {
body {
background: #FF0;
}
}

上面的CSS代码表示,该区块对所有媒介(media)有效,且视口的最大宽度不得超过700像素。如果条件满足,则body元素的背景设为#FF0。

需要注意的是,mediaQuery接受两种宽度/高度的度量,一种是上例的“视口”的宽度/高度,还有一种是“设备”的宽度/高度,下面就是一个例子。

@media all and (max-device-width: 700px) {
body {
background: #FF0;
}
}

视口的宽度/高度(width/height)使用documentElement.clientWidth/clientHeight来衡量,单位是CSS像素;设备的宽度/高度(device-width/device-height)使用screen.width/height来衡量,单位是设备硬件的像素。

window.matchMedia方法接受一个mediaQuery语句的字符串作为参数,返回一个MediaQueryList对象。该对象有以下两个属性。

  • media:返回所查询的mediaQuery语句字符串。
  • matches:返回一个布尔值,表示当前环境是否匹配查询语句。
var result = window.matchMedia('(min-width: 600px)');
result.media // (min-width: 600px)
result.matches // true

下面是另外一个例子,根据mediaQuery是否匹配当前环境,执行不同的JavaScript代码。

var result = window.matchMedia('(max-width: 700px)');

if (result.matches) {
console.log('页面宽度小于等于700px');
} else {
console.log('页面宽度大于700px');
}

下面的例子根据mediaQuery是否匹配当前环境,加载相应的CSS样式表。

var result = window.matchMedia("(max-width: 700px)");

if (result.matches){
var linkElm = document.createElement('link');
linkElm.setAttribute('rel', 'stylesheet');
linkElm.setAttribute('type', 'text/css');
linkElm.setAttribute('href', 'small.css'); document.head.appendChild(linkElm);
}

注意,如果window.matchMedia无法解析mediaQuery参数,返回的总是false,而不是报错。

window.matchMedia('bad string').matches
// false

监听事件

window.matchMedia方法返回的MediaQueryList对象有两个方法,用来监听事件:addListener方法和removeListener方法。如果mediaQuery查询结果发生变化,就调用指定的回调函数。

var mql = window.matchMedia("(max-width: 700px)");

// 指定回调函数
mql.addListener(mqCallback); // 撤销回调函数
mql.removeListener(mqCallback); function mqCallback(mql) {
if (mql.matches) {
// 宽度小于等于700像素
} else {
// 宽度大于700像素
}
}

上面代码中,回调函数的参数是MediaQueryList对象。回调函数的调用可能存在两种情况。一种是显示宽度从700像素以上变为以下,另一种是从700像素以下变为以上,所以在回调函数内部要判断一下当前的屏幕宽度。

css3@media实现原理的更多相关文章

  1. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  2. CSS3 media 入门

    css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media  语法: @media mediatype a ...

  3. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  4. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  5. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  6. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  7. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  8. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  9. CSS3 Media Queries模板

    使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...

随机推荐

  1. jq-demo-轮播图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  3. 区别 |python-pandas库set_index、reset_index用法区别

    1.set_index() 作用:DataFrame可以通过set_index方法,将普通列设置为单索引/复合索引. 格式:DataFrame.set_index(keys, drop=True, a ...

  4. 单源最短路径问题1 (Bellman-Ford算法)

    /*单源最短路径问题1 (Bellman-Ford算法)样例: 5 7 0 1 3 0 3 7 1 2 4 1 3 2 2 3 5 2 4 6 3 4 4 输出: [0, 3, 7, 5, 9] */ ...

  5. CentOS下安装Lua

    Lua是一种轻量小巧的脚本语言,用标准  C语言编写并以源代码形式开放,其设计目的是 为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能.官网: http://www.lua.org/ 安装过 ...

  6. NX二次开发-UF_MODL_ask_angle_tolerance获取建模的角度公差

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize() ...

  7. NX二次开发-算法篇-判断找到两个数组里不相同的对象

    NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_modl.h> #include < ...

  8. Python的变长参数

    Python的变长参数 def foo1(*args): for arg in args: print arg def foo2(**kargs): for key in kargs: print k ...

  9. WinDbg解决BHO不加载

    昨天zhengwei同学说他机器上的一个BHO不能正常加载,我把BHO的代码拿过来,在我的两台机器上都验证了一下,一台是Win7+IE8的环境,一台是XP+IE7的环境,都能正常加载.zhengwei ...

  10. 把swf反编译成fla的几种方法

    2007年著 第一种方法: 利用IMPERATOR FLA1.63 ,这个软件有演示版 和正式版 , 演示版不能反编译Action Scropt,在利用正式版反编译的过程中有时会丢失Action Sc ...