用JavaScript操作Media Queries
在响应式(或自适应)设计中要用到Media Queries这个CSS属性,但在某些时候我们需要对Media Queries进行动态操作,这时候可以使用Javascript。
如以下Media Queries的代码:
- @media all and (max-width: 700px) {
- body {
- background: #FF0;
- }
- }
我们可以使用javascript的window.matchMedia函数来操作Media Queries,该函数现在可以被大部分浏览器(包含IE9以上的版本)支持
。
- var mq = window.matchMedia('@media all and (max-width: 700px)');
- if(mq.matches) {
- // the width of browser is more then 700px
- } else {
- // the width of browser is less then 700px
- }
- mq.addListener(function(changed) {
- if(changed.matches) {
- // the width of browser is more then 700px
- } else {
- // the width of browser is less then 700px
- }
- });
参考: Using Media Queries in JavaScript
用JavaScript操作Media Queries的更多相关文章
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- JavaScript根据CSS的Media Queries来判断浏览设备的方法
CSS 部分 首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值.这个类仅作为 JavaScript 读取使用,所以需要将其移出屏幕窗 ...
- 实践 HTML5 的 CSS3 Media Queries
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- Media Queries使用方法
1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...
- 基于 CSS3 Media Queries 的 HTML5 应用
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
- CSS3系列四(Media Queries移动设备样式)
viewport设置适应移动设备屏幕大小 viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能 <meta name="viewport" conten ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
随机推荐
- [C和指针]第四部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 细说 Request[]与Request.Params[]
http://www.cnblogs.com/fish-li/archive/2011/12/06/2278463.html
- 慎重别选择到"僵尸"软件
何谓僵尸? 没有灵魂,动作单一,我们电视电影上经常看见, 只能往前跳,不会走路, 手向前伸直,左右摆攻击. 何谓"僵尸"软件? 根据僵尸的特性,大概有如下几类: 1.没有任何创新性 ...
- web设计经验<八>20个设计新手常犯的排版设计误区
很多同学问设哥,为什么别人字体就那么随意放一下就辣么好看,其实排版可有大学问,不是随意放就好看.这就如同配色一样,也有千变万化的学问.相信大家看完Designschool这篇头条热文,一定倍有收获. ...
- poj1981Circle and Points(单位圆覆盖最多的点)
链接 O(n^3)的做法: 枚举任意两点为弦的圆,然后再枚举其它点是否在圆内. 用到了两个函数 atan2反正切函数,据说可以很好的避免一些特殊情况 #include <iostream> ...
- poj1244Slots of Fun
链接 几何的简单题,建立坐标,判断相等以及不共线 #include <iostream> #include<cstdio> #include<cstring> #i ...
- Mysql 命令行工具
1.Mysql命令行工具分为两类:服务端命令行工具和客户端命令行工具. 2.服务端工具 mysql_install_db:建库工具 mysqld_safe:Mysql服务的启动工具,mysqld_sa ...
- css处理浏览器兼容问题
浏览器的兼容: _ ie6认识 格式:_width:100px;要写在最后面来覆盖前面的. * ie6和ie7都认识 格式:* width:100px;要写在最后面来覆盖前面的. \0 ie8认识 ...
- Differences between volume, partition and drive
A drive is a physical block disk. For example: /dev/sda. A partition A drive can be divided into som ...
- Linux命令之nslookup
http://www.computerhope.com/unix/unslooku.htm About nslookup The nslookup command is used to query i ...