media type 与 media query

参考博客：http://www.qianduan.net/media-type-and-media-query.html

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 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	横屏或竖屏

几个特别注意的地方

1、 orientation:判断设备是横屏还是竖屏时使用，Portrait判断输出设备中的页面可见区域高度大于或等于宽度(竖屏状态)；landscape:除portrait值情况外，都是landscape。

eg:

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

 <meta charset="utf-8" />

 <title>media features orientation_CSS参考手册_web前端开发参考手册系列</title>

 <style>

 @media not screen and (orientation:portrait){

     body{color:#f00;}

 }

 </style>

 </head>

 <body>

 <div class="test">当输出设备中的页面可见宽度大于高度时，本行文字显示为红色</div>

 </body>

 </html>

例子中 @media not screen and (orientation:portrait) 由于使用的not 故之前的竖屏状态改为了横屏状态（设备的宽度大于高度）是触发此CSS.

2、device-aspect-ratio 表示输出设备页面的尺寸比（常见的有4:3 16:9 但是这里表示用的是4/3 16/9）：

eg:

 /* 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{

     }

 }

3、webkit :WebKit 是一个开源的浏览器引擎

现在浏览器的内核引擎，基本上是四分天下：

Trident: IE 以Trident 作为内核引擎;

　　Gecko: Firefox 是基于 Gecko 开发;

　　WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器基于 Webkit 开发。

　　Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

　　注：2013年2月Opera宣布转向WebKit引擎

　　注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

故在CSS3中添加了前缀来区分一些浏览器的特有属性：

　　-moz代表firefox浏览器私有属性
　　-ms代表IE浏览器私有属性
　　-webkit代表chrome、safari私有属性
　　-o 代表opera 浏览器

秒客网

media type 与 media query

media type

media query支持的属性

相关文章