快速业务通道

media query(媒体查询)和media type(媒体类型)

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-02

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。随着移动互联网的发展,media query开始得到大家的重视。

media type

让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
其实,media type有很多种:

类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示,比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体,比如电传打字机
tv 电视

media type的几种使用方法

我们可以通过几种方法来声明media type:

方法一

<link href="style.css" media="screen print" ...

方法二

<?xml-stylesheet media="screen" href="style.css"...

方法三

@import url("style.css") screen;

方法四

1
2
3
<style media="screen">
@import url("style.css");
</style>

方法五

1
2
3
@media screen{
selector{rules}
}

当然,这几种方法各有利弊,而我们常用的是第一种和最后一种方法。

media type的浏览器支持

  • IE5.5/6/7不支持在@import中使用媒体类型
  • Safari/firefox只支持all,screen,print三种类型(包括iph

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号