css中的media
说起CSS3的新特性,就不得不提到 Media Queries 。最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha 。
虽然标题相同,但本文并不是列表上 CSS3 Media Queries 的译文,因为原版有Demo有例子有图片,全文不长而且不难看懂,所以我也就不翻译了。基于自己已经了解到一定程度,所以就打算自己写。
CSS2中有已经定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。
而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
引用CSS3 Media Queries里的直观的 DEMO,当浏览器宽度改变时,应用的CSS发生变化。而这一切,原本需要 JavaScript 的控制才能做到。
Web移动化的趋势越加明显,各种手持设备的发展现在完全引领着整个互联网的发展。虽然国内受到很多制约,但是这种浪潮却无法阻挡。前段时间jQuery宣布mobile计划,也加速了这种变化。Media Queries 不久的将来应该就会被广泛使用,以更好的支持新兴设备比如iPad。事实上, jQuery 甚至有 Media Queries的插件。
下面来看看 Media Queries 做了什么。
为了展示我拙劣的PS技术,以及为了不让我的伪技术博客过于沉闷,我画了下面这张图:
一个三栏布局,在屏幕变窄的情况下,变成1栏布局,甚至是消除多余两栏而只留下通常的内容的第2栏。Media Queries是如何工作的?
先看看 link 标签的写法:
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
在media属性里:
- screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
- and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
- (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
媒体特性共13种,可以说是一个类似CSS属性的集合。但和CSS属性不同的是,媒体特性只接受单个的逻辑表达式作为其值,或者没有值。并且其中的大部分接受 min/max 的前缀,用来表示 大于等于/小于等于 的逻辑,以此避免使用 <
和 >
这些字符。
根据文档,我还是列张表吧:
Media features | Value | Applies to | Accepts min/max |
---|---|---|---|
width | length | visual and tactile media types | yes |
height | length | visual and tactile media types | yes |
device-width | length | visual and tactile media types | yes |
device-height | length | visual and tactile media types | yes |
orientation | portrait | landscape | bitmap media types | no |
aspect-ratio | ratio | bitmap media types | yes |
device-aspect-ratio | ratio | bitmap media types | yes |
color | integer | visual media types | yes |
color-index | integer | visual media types | yes |
monochrome | integer | visual media types | yes |
resolution | resolution | bitmap media types | yes |
scan | progressive | interlace | "tv" media types | no |
grid | integer | visual and tactile media types | no |
那么,回到刚才的那条 Media Query,media="screen and (min-width: 400px)" 的意思就是当屏幕的宽度大于等于400px的时候,应用此条CSS。
一个 Media Query 包含一种媒体类型,如果媒体类型没有指定,那么就是默认类型all,比如:
<link rel="stylesheet" type="text/css" href="example.css"
media="(max-width: 600px)">
一个 Media Query 包含0到多个表达式,表达式又包含0到多个关键字,以及一种媒体特性,比如:
<link rel="stylesheet" type="text/css" href="example.css"
media="handheld and (min-width:20em) and (max-width:50em)">
逗号(,)被用来表示并列,表示或者。比如下面的例子表示此CSS被应用于宽度小于20em的手持,或者宽度小于30em的屏幕:
<link rel="stylesheet" type="text/css" href="example.css"
media="handheld and (max-width:20em), screen and (max-width:30em)">
not 关键字用来排除符合表达式的设备,比如:
<link rel="stylesheet" type="text/css" href="example.css"
media="not screen and (color)">
再看些其他例子(不准确,只是用来说明):
<link rel="stylesheet" type="text/css" href="styleA.css"
media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css"
media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"
media="screen and (max-width: 600px)">
上面将设备分成3种,分别是宽度大于800px时,应用styleA,宽度在600px到800px之间时应用styleB,以及宽度小于600px时应用styleC。这其实是一个CSS覆盖的问题,所以当宽度正好等于800px时该应用那个样式?答案是styleB,因为前两条表达式都成立,后者覆盖了前者。
所以说上面的例子虽然能工作,但是不准确。这个例子正常情况应该这样写:
<link rel="stylesheet" type="text/css" href="styleA.css"
media="screen">
<link rel="stylesheet" type="text/css" href="styleB.css"
media="screen and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"
media="screen and (max-width: 600px)">
并非所有的浏览器都支持Media Queries,那么这些浏览器怎么看待Media Queries?
Media Queries是CSS3对于Media Type的一个扩展,所以不支持Media Queries的浏览器,应该仍然要识别Media Type,但是IE只是简单的忽略了样式。only 关键字可能显得有些多余,对支持Media Queries的浏览器来说确实是这样,因为加不加 only 没有影响。only的作用,很多时候是用来对那些不支持Media Queries但是却读取Media Type的设备隐藏样式表的。比如:
<link rel="stylesheet" type="text/css" href="example.css"
media="only screen and (color)">
- 支持Media Queries的设备,正确应用样式,就仿佛only不存在
- 不支持Media Queries但正确读取Media Type的设备,由于先读取到only而不是screen,将忽略这个样式
- 不支持Media Queries的IE不论是否有only,都忽略样式
最后再来看看 Media Queries 的支持情况。不出意外的,IE678全部出局,但是IE9幸免。根据IEBlog上的这篇 HTML5 and Same Markup 来看,IE9支持Media Queries。至于其他浏览器,同样不出意外的,全部支持Media Queries
css中的media的更多相关文章
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- CSS中@support的用法 及其calc、media用法
背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...
- css中的expression
最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...
- CSS中兼容的一面-----Hack
国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...
- 有关CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- CSS中常用的字体单位:px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- [转] 博闻强识:了解CSS中的@ AT规则 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4900 大家可能在CS ...
随机推荐
- Entity Framework学习笔记
原文地址:http://www.cnblogs.com/frankofgdc/p/3600090.html Entity Framework学习笔记——错误汇总 之前的小项目做完了,到了总结经验和 ...
- 求解printf函数?
求大神解释一下下面的代码为什么答案不是1 2,而是1 0. #include <stdio.h> int ans = 0; int a() { ans = 1; return ans++; ...
- linux 学习之九、Linux 磁盘与文件系统管理(1)
原文地址:http://vbird.dic.ksu.edu.tw/linux_basic/0230filesystem.php#filesys 查看文件系统参数命令 dumpe2fs 盘符地址 例: ...
- 无线网破解软件|一键式破解无线网|BT17软件包下载[笔记本+软件就行]
从新版BT17发布到现在已经有一段时间,谢谢大家的一直来的关注.现在给大家讲解一下无线网破解问题,告诉 大家如何一键式破解WPA,WPA2,AES.Tkip等加密方式以及新版BT17软件包的下载地址. ...
- 树形dp-hdu-4714-Tree2cycle
题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4714 题目意思: 给一棵树,去掉一条边和增加一条边的花费都为1,求最小的花费,使该树变成一个环. 解 ...
- tomcat 配置项目
tomcat\conf\Catalina\localhost 下面存在项目配置文件信息,emas.xml 表示你eclipse中有个emas项目, 还有其他的项目xml.
- C#中一个问号和两个问号(a ?? b)的作用
不卖关子,直接开门见山: C#中两个问号的作用是判断??左边的对象是否为null,如果不为null则使用??左边的对象,如果为null则使用??右边的对象. 比如:a = b ?? c,如果b为nul ...
- 游戏基础元素——Cocos2d-x学习历程(八)
1.Director:导演 从字面上理解,这是一个"导演"类,Director是控制游戏流程的主要组件.CCDirector的工作确实跟导演非常类似,主要负责以下工作: 游戏呈现方 ...
- Java学习之网络编程实例
转自:http://www.cnblogs.com/springcsc/archive/2009/12/03/1616413.html 多谢分享 网络编程 网络编程对于很多的初学者来说,都是很向往的一 ...
- Jexus下配置多个站点
一.在jexus中一个配置文件就是一个站点,有多少个配置文件就可以创建多少个站点 配置文件所在的位置 在siteconf中有一个最基本的配置 default ##################### ...