媒体查询如何使用

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网css9任务中可能会使用到的知识点：

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：

方法一

style media="screen">

@import url("style.css");

方法二

@media screen{

selector{rules}

}

方法三

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

media type的浏览器支持

IE5.5/6/7不支持在@import中使用媒体类型

Safari/firefox只支持all,screen,print三种类型(包括iphone)

Opera 完全支持

Opera mini  支持handheld，未指定则使用screen

Windows Mobile系统中的IE支持handheld，其它支持不明…

媒体查询语句结构

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

@media screen and (min-width:1024px) and (max-width:1280px){

body{font-size:medium;}

}

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支持)

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑