在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/
相关推荐
微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加... !–[if IE]> ...
NULL 博文链接:https://axl234.iteye.com/blog/1833406
包括利用CSS3-Media Query实现响应式布局等知识点
主要是我们将了解一下怎样通过html5和css3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式web设计方案
这是一个使用纯js和CSS3媒体查询制作的简单的响应式导航菜单效果的代码。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。本代码适用...
这是一款使用纯js和CSS3媒体查询制作的简单的响应式导航菜单效果。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。
接下来,我们将了解一下怎样通过HTML5和CSS3MediaQueries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时...
主要介绍了CSS3的media query学习攻略,media query的媒体查询经常被用于设计响应式网页,需要的朋友可以参考下
js css3制作响应式导航菜单代码是一款类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。
js+css3实现响应式导航菜单代码是一款类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单,根据浏览窗口大小自适应手机电脑平板端。
我们通常建议使用原始CSS媒体查询来构建响应式网站,这更简单,提供更流畅的UX,并且还减轻了在过程中猜测屏幕宽度的。 如果您需要在各种媒体类型之间显着改变页面布局,请使用此库(一些示例包括:实验需要在特定...
这是一个使用纯js和CSS3媒体查询制作的简单的响应式导航菜单效果的代码。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。本代码适用...
我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。 第一步:Meta标签(看demo) 大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度,这样内容就可以屏幕上...
这是一个基于psd到html响应式布局的UI / UX项目,该项目使用html5,css3,javascrip和jaquery与css3 Media Query一起设计。 该概念是完全基于前端的单个网页设计。
如果您不熟悉围绕响应式网页设计的概念,您可以阅读和(颜色更改以显示媒体查询工作)使用说明使用最小/最大宽度媒体查询制作您的 CSS,以适应您从移动设备(首先)一直到桌面设备的布局 @media screen and (min-...
CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3.他可以为你获取各种终端的数据。
CSS GuideBook 目录 基础概念 属性 ...媒体查询(Media Query) 用 REM 开发响应式设计 多列布局(Multiple Columns) 前端性能优化 浏览器兼容 CSS HAck 优质工具网站推荐 参考资料 关于 CSS 详细
js+css3制作响应式导航菜单代码是一款类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。