CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局。具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分。通过响应式布局,可以达到只使用单一文件提供多平台的兼容性,省去了诸如浏览器判断之类的代码。
当然这种设计也存在着缺点,比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素,这样势必会导致大量不必要的流量。因此,如果有较为重要的移动端需求,那么还是开发专门的移动版页面为好。不过,对于诸如内容较少的页面 或者单页式网站来说,响应式布局依然不失为一种偷懒的好方法 ^ ^
一、在 <head> 链接CSS文件时提供判断语句,选择性加载不同的CSS文件
<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">
这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。
二、在CSS文件中分段书写不同设备的代码
/* CSS Code */
@media screen and (min-width: 600px) { /* CSS Code */ }
@media screen and (max-width: 599px) { /* CSS Code */ }
相信这个代码也很容易理解,写在 @media 语句段外的是共用代码,第一个 @media 语句段是 屏幕以及最小宽度600px ,第而个 @media 语句段是 屏幕以及最大宽度599px 。
如果不同的代码段有冲突或者重叠,会按照CSS原本的代码优先级排序,即后方代码替代前方代码,等等。
三、媒体介质类型
CSS3中提供了多种媒体介质类型,虽然常用的就俩……注意媒体类型名称区分大小写,并且尽管有些介质类型有重合,但是一个平台只会有一种介质类型。(我猜这个标准很多浏览器不会遵守吧?)
- all – 全部媒体类型
- braille – 盲文触摸装置
- embossed – 分页盲文打印机 (W3C的无障碍做的真细心……)
- handheld – 小屏幕和流量有限的手持设备(注意!安装标准来说移动设备都应该使用这个介质类型,但是实际上安卓根本不理会这个介质,请使用 screen 结合媒体查询语句使用)
- print – 提供给打印机的样式,最常用的介质类型,打印页面时获得适合阅读的效果
- projection – 投影,给投影机使用(有人用?)
- screen – 彩色屏幕,最常用的介质类型,一般和屏幕大小表达式联合使用
- speech – 语音朗诵,用于屏幕阅读软件(和将来的Siri?)
- tty – 固定间距字符网格,例如功能机那样的
- tv – 智能电视设备(唔不知道我家的创维酷开支持如何……)
四、媒体查询语句
除了媒体介质,我们还能通过 and 使用 Media Query 语句,达到对屏幕大小的判断生成响应式布局。(可以通过改变浏览器窗口大小在桌面下测试效果)
一个 Media Query 包含一种媒体类型,如果媒体类型没有指定,那么就是默认类型all,比如:
media="(max-width: 600px)"
也可以使用 and 表示同时满足这两者时生效,达到限定范围:
handheld and (min-width:20em) and (max-width:50em)
逗号 , 被用来表示 并列 和 或者 :
handheld and (max-width:20em), screen and (max-width:30em)
not 用来排除符合表达式的设备:
not screen and (color)
下面来解释一下遇到冲突时的机制:
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
上面将设备分成3种,分别是宽度大于800px时,应用 styleA ,宽度在600px到800px之间时应用 styleB ,以及宽度小于600px时应用 styleC 。那假如宽度正好等于800px时该应用那个样式?是 styleB,因为前两条表达式都成立,按CSS默认优先级规则后者覆盖了前者。
因此,为了避免冲突,这个例子正常情况应该这样写:
<link rel="stylesheet" href="styleA.css" media="screen">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
五、浏览器支持
媒体介质在CSS2中已经被添加,因此主流平台的浏览器毫无疑问都可以正确支持。但是 Media Query 语句是CSS3中添加的新功能,部分浏览器可能并不理解。例如IE能成功解读媒体介质,但是却无法解读 and 后面的媒体查询语句,就会连带媒体介质一起忽略。为了让不识别媒体查询语句的浏览器依然识别到媒体介质,可以使用 only 关键字进行hack。
<link rel="stylesheet" href="example.css" media="only screen and (color)">
添加了 only 关键字后,支持媒体查询语句的浏览器依然正常解析。但不支持媒体查询语句但正确读取媒体介质的设备,由于先读取到 only 而不是 screen ,将忽略这个样式。不支持媒体查询的IE不论是否有 only ,都直接忽略样式。
最后是浏览器支持情况:
IE8-- IE9+
- Chrome 5+
- Opera 10+
- Firefox 3.6+<
- Safari 4+
原文:http://blog.dimpurr.com/css-media/
CSS3 Media Query 响应式媒体查询相关推荐
- html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局. 下图展示了 ...
- 响应式 媒体查询 盒模型
盒模型 border-box content-box border-sizing:有两个值 border-box(容器的实际大小是用户设置的) content-bo ...
- CSS3: Media Query实现响应式Web设计
十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次 长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上 ...
- CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)
如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手 机.上网本.iPad一类的平板设备来浏览页面.这种 ...
- CSS3实现的响应式字体:自适应视图窗口大小的新单位
这个是为了解决什么问题? 我最近在做一个项目.客户要求标题可以根据用户屏幕的尺寸而自动改变大小.我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而 ...
- html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
- 一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览 源码下载 实现的代码. html代码: <di ...
- CSS3 Media Query:移动 Web 的完美开端
CSS3 Media Query:移动 Web 的完美开端 Introduction 移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕 ...
- HTML5+CSS3实现的响应式垂直时间轴
网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等.本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB ...
最新文章
- U3D的Collider
- AJAX学习基础:简单介绍数据岛使用方法
- 用户画像标签维度_一文看懂用户画像标签体系(包括维度、应用场景)
- 给做IT的一点心理安慰
- 【Linux】Linux 守护进程的启动方法
- c/c++教程 - 2.4.2.7~8 类对象作为类成员,static静态成员变量函数
- hdu4027线段树
- JAVA面试个人简历模板 ——(2022年最新版)
- “终端服务临时客户端许可证过期”的解决方法
- bat脚本重启IIS中的网站
- wifi连接上不能上网怎么办服务器无响应,连接WIFI却不能上网的解决办法
- 计算机加硬盘后速度变慢,Win10安装SSD固态硬盘后运行速度还很慢的解决方法
- 米家扫地机器人尘盒怎么取_米家扫地机器人怎么清理灰尘盒
- 超高频RFID电子标签技术和应用分析
- 2022年都在说软件测试饱和了,是真的吗?
- 32位乘法器和除法器
- vue项目初始化出现tar ENOENT: no such file or directory错误的解决办法。
- XUN·LEI 会员哒
- nacos启动报错 Unable to start embedded Tomcat 以及项目链接nacos报错 server is DOWN now, please try again later!
- Ajax提交与submit提交对比
热门文章
- 数论 —— 最大公约数与最小公倍数
- androidrunnable使用_Android Runnable 运行在那个线程
- 竟然如此简单!C++实现完全随机加密、解析库,并附上完整代码分析
- mapview Java,Class:android核心类/MapView
- 怎么锁定计算机密码忘了怎么办,如果忘记了手机数字锁的密码(仅需10秒钟即可解锁),该怎么办...
- php编写个人所得税单元测试,php趣味编程-php求个人所得税
- pandas python2.3版本_python-像以前的版本一样,将pandas 0.13.0“ pri...
- 智能指针可以放到容器中么_Rust语言入门教程 智能指针篇
- 树莓派4b怎么使用usb摄像头_【动手实践】树莓派通过EC20模组访问互联网 by xinlong...
- python和json转换_【Python】python和json数据相互转换,json读取和写入,repr和eval()使用...