css3@media实现原理
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实现原理的更多相关文章
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media 语法: @media mediatype a ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- CSS3 Media Queries模板
使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...
随机推荐
- javascript 跨域问题 jsonp
转载:http://www.cnblogs.com/choon/p/5393682.html demo 用动态创建<script></script>节点的方式实现了跨域HTTP ...
- 基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
- NX二次开发-UFUN圆弧矩阵标记、起始角和结束角(弧度测量)、圆弧中心坐标和圆弧半径UF_CURVE_ask_arc_data(边可以用)
1 NX11+VS2013 2 3 #include <uf.h> 4 #include <uf_ui.h> 5 #include <uf_modl.h> 6 #i ...
- Centos7.5安装分布式Hadoop2.6.0+Hbase+Hive(CDH5.14.2离线安装tar包)
Tags: Hadoop Centos7.5安装分布式Hadoop2.6.0+Hbase+Hive(CDH5.14.2离线安装tar包) Centos7.5安装分布式Hadoop2.6.0+Hbase ...
- CodeForces1249B1/B2-Books Exchange-dfs-一般搜索+记忆化搜索
一般搜索 注意:一般定义成void Books Exchange (easy version) CodeForces - 1249B2 The only difference between eas ...
- 拾遗:Linux 用户及权限管理基础
Lacks of Knowledge 1: Linux has large amount of COMMANDS,but many of them have similar funtions,it's ...
- Scala 学习2
去map里面的数据 scala> val map = Map("a"->1, "b"->2, "c"->3) map ...
- 【csp】2017-9
1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- vue 配置微信分享
参考:https://www.cnblogs.com/goloving/p/9256212.html 1. main.js import WXConfig from '../../assets/js/ ...