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

2024-11-26 来源：个人技术集锦

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三种类型(包括iphone)
Opera 完全支持
Opera mini 支持handheld，未指定则使用screen
Windows Mobile系统中的IE支持handheld，其它支持不明…

media query

正如前文所说，media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。

请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。

css属性判断可以只是某个CSS属性的名称，也可以是属性+值：

<link rel="stylesheet" media="screen and (animation)” herf=“…”

如果设备支持CSS动画，那么就能执行这个外部样式表文件。

1
2
3

@media screen and (max-width:240px){
	body{font-size:medium;}
}

如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。

PS:属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。

媒体查询语句结构

我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由media type+一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接：

1
2
3

@media screen and (min-width:1024px) and (max-width:1280px){
	body{font-size:medium;}
}

其中media type可以省略，属性值也可以为空：

@media (color:4){}

@media (color){}

当然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。

而针对多个媒体类型的CSS规则，可以用逗号来隔开：

1
2
3

@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}

1
2
3

@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}

media query支持的属性

事实上，media query支持的属性和我们常用的CSS属性是不太一样的，它们是一些特别定义的条目：

属性	值	Min/Max	描述
color	整数	yes	每种色彩的字节数
color-index	整数	yes	色彩表中的色彩数
device-aspect-ratio	整数/整数	yes	宽高比例
device-height	length	yes	设备屏幕的输出高度
device-width	length	yes	设备屏幕的输出宽度
grid	整数	no	是否是基于格栅的设备
height	length	yes	渲染界面的高度
monochrome	整数	yes	单色帧缓冲器中每像素字节
resolution	分辨率(“dpi/dpcm”)	yes	分辨率
scan	Progressive interlaced	no	tv媒体类型的扫描方式
width	length	yes	渲染界面的宽度
orientation	Portrait/landscape	no	横屏或竖屏

从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。

浏览器扩展

webkit

webkit是最早实现media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：

transform-2d	只用于支持使用 -webkit-transform实现2D变换的浏览器
transform-3d	只用于支持使用 -webkit-transform实现3D变换的浏览器
transition	只用于支持使用-webkit-transition实现变换效果的浏览器
animation	只用于支持使用-webkit-animation实现动画的浏览器

详情请看这里：http://webkit.org/specs/MediaQueriesExtensions.html

firefox

firefox也提供一些自己的扩展，不过由于firefox浏览器的手机版现在还很弱，所以很少会用到，感兴趣的同学可以到https://developer.mozilla.org/En/CSS/Media_queries查阅。

max与min

细心的同学可能已经注意到前面用到的这两个关键词，他们是要配合支持它们的属性使用的，它们的意义与我们常用的max-width和minwidth等类似。

各属性对max和min的支持在前面的属性列表中有给出，这里是一个详细的列表：

height	min-height	max-height
device-width	min-device-width	max-device-width
device-height	min-device-height	max-device-height
aspect-ratio	min-aspect-ratio	max-aspect-ratio
device-aspect-ratio	min-device-aspect-ratio	max-device-aspect-ratio
color	min-color	max-color
color-index	min-color-index	max-color-index
Monochrome	min-monochrome	max-monochrome
Resolution	min-resolution	max-resolution

not/only

媒体类型还支持 not和only关键字，它们可以用来更方便的定位某个媒体设备：

not：排除某种制定的媒体类型

@media not print and (color){
}

only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器：

@media only screen and (color){
}

media query的浏览器支持：

IE 9以下不支持
Firefox 3.5+(Gecko 1.9.1+)支持
Opera 9.5+完全支持
Opera mini 5支持
webkit 支持大部分属性(safari 3.0的内核版本是522，iPhone 1代的safari的内核版本是524，webkit大概从这个时候开始支持media query，但是对部分属性比如projection支持不好)
iPhone OS 3.2之前的版本不支持orientation属性，iPad和iPhone 4支持该属性。
iPhone Safari不支持orientation(iPhone 4支持)

实例：

现在让我们来看一些典型的例子：

检测iPhone safari：

<link media="only screen and (max-device-width: 480px)" href="style.css">

这是apple官方网站推荐的一种定位iPhone safari浏览器的方法，在iPhone一代和2代的时代，这条规则的确能够正确的判断出iPhone的浏览器，但是后来出现了Android的大屏幕手机，比如Nexus One和HTC desire，这条规则也能适配这些480px宽度的机器。

Google的iPhone横屏样式：

Google之前通过以下方式为iPhone手机提供横屏样式(因为最早的3代iPhone手机不支持orientation属性)：

@media screen and (max-height:300px){
    #linksDiv{
        margin-top:10px;
    }
    ...
}

android手机的多分辨率问题：

android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}
 
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}

当然，对于手机也可以使用这个属性，比如对于480px*800px的Nexus One和Desire等手机，可以用下面的样式来匹配：

/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
    selector{
    }
}

O’Reilly区分iPhone和iPad的方法

O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本，从而提供最适合相关设备阅读的界面，他们的做法就是使用media query：

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

详细介绍可以查看这里：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

总结

CSS 3的media query是一个很强大也很好用的工具，它为我们在不同的设备和环境下实现丰富的界面提供了一种快捷方法，虽然现在各个浏览器对它的支持还有些差异，但是大家都在改进，IE 9已经开始支持media query了。不过目前media query的最大舞台是在高端手持设备，相信随着移动互联网的快速发展，media query也会很好发挥自己的作用。

转载于:https://www.cnblogs.com/jhti/archive/2011/07/06/2099232.html

个人技术集锦还为您提供以下相关内容希望对您有帮助：

media query和media type总结(转)

第一种：标签的 media 属性第二种：标签的 media 属性第三种： @import 方式第四种：在 style 里为某些样式指定 media 注：若没有指定media，默认为 all 媒体查询包含一个媒体类型(media type) 以及一个到多个测试媒体特性(media feature) 的表达式，表达式和媒体类型将根据实...

什么叫media query

前面这个简单的实例引出两个概念性的东西,一个就是媒体类型(Media Type)和媒体特性(Media Query),首先一起来理解一下这两个概念:一、媒体类型(Media Type)媒体类型(Media Type)在css2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式,在css2中我们常碰到的就是 all(...

@media 媒体查询

media媒体查询：针对不同的屏幕尺寸设置不同的样式 media mediatype and(not/only) (media feature){ } mediatype（媒体类型）: all--所有设备， print--打印机和打印预览， screen--电脑屏幕和平板电脑和只能手机等 and / not / ...

什么叫media query

media query 网络媒体查询;[例句]As introduced earlier, a media query is a technique to obtain information about the client.正如之前介绍的，一个媒体查询是一种获得客户相关信息的技术。

css 媒体(Media)类型是什么?有什么作用?

媒体查询媒体查询是媒体类型的一个重要应用。它允许我们检测设备的特性，如宽度、高度和颜色等，并据此为特定输出设备定制显示效果。使用媒体查询，我们可以在不改变页面内容的前提下，为特定设备提供个性化显示。常见的媒体类型在css2中，常见的媒体类型包括all（所有设备）、screen（显示设备）、print（...

媒体查询有什么用媒体查询有什么作用

媒体查询是为不同设备提供不同风格的好方法，它为每种类型的用户提供了最佳体验。作为CSS3规范的一部分，mediaquery扩展了media属性的作用(它控制如何应用您的样式)。例如，多年来，人们经常通过指定media=rel=media=rel= media=单色整数是单色缓冲区中每个像素的位数(如果不是单色，则值为0)；0)分辨率...

CSS3媒体查询media_queries响应式布局入门指南知识点总结

媒体查询语法涉及媒体设备类型，最常见的包括screen（屏幕）、print（打印）等，可以通过style标签、重置样式表或@import引入。使用逻辑运算符and、not和only可以组合多个条件，如`@media screen and (max-width: 480px)`表示只有在屏幕宽度不超过480px时应用样式。媒体查询的特性，如max-width、min-width...

哪些地方会出现css阻塞,哪些地方会出现js阻塞

默认情况下，CSS会被看做是渲染阻塞资源，也就是说，浏览器在CSSOM建立前，已经处理过的网页内容不会被显示到页面上。所以，保证你的CSS代码能够快速从服务器获取且尽可能的简短，并注意使用媒体类型（media types）和媒体查询（media queries）去进行非阻塞的渲染。

面试|用过媒体查询@media吗?

媒体查询（Mediaqueries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。我对@media的理解：因为现实中存在许多不同的设备，不同的设备可能分辨率不同，可能屏幕可见区域也不同。为了能让同一份...

关于期刊国际标准刊号问题?

查询方法一打开新闻出版总署网站http://www.gapp.gov.cn/（中华人民共和国新闻出版总署办公厅主办）（1）页面右中找到〔新闻机构查询〕栏目（2）〔媒体名称〕填写：期刊名称（3）〔媒体类别〕选择：期刊（4）点击〔搜索〕即可查证 --- 查询方法二打开”中国记者网”http://press.gapp.gov.cn...

显示全文

全部栏目