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

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

media type类型

media type的类型有以下几种:

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

media type使用方法

方法一:

<link type="text/css" href="..." media="screen">

方法二:

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

方法三:

<style>
@media screen{
	body{color:#f00;}
}
</style>

方法四:

<style media="screen">
body{color:#f00;}
</style>

media query

media query是css3对media type的增强,也可以看成是media type+css属性判断,css属性的判断可以只是某个css属性的名称,也可以是属性+值:

@media screen and (max-width:480px){
	body{background:#000;}
}

上面的条件是指当浏览器的最大宽度为480px时,调用里面的样式。同时它还可以有多个判断条件,用and连接,如下所指的是:当浏览器的最小宽度为480px,同时最大宽度为1024px时,显示如下样式:

@media screen and (min-device-width:480px) and (max-device-width:1024px){
	body{background:#333;}
}

当出现多个媒体类型的css规则时,则用逗号隔开,如下显示的是当浏览器的最小宽度为480px,同时最大宽度为1024px时,或者当设备屏幕的输出宽度大于480px,小于1024px时,显示如下样式:

@media screen and (min-device-width:480px) and (max-device-width:1024px), screen and (min-width:480px) and (max-width:10240px){
	body{background:#666;}
}

媒体类型还支持notonly关键字,它们可以用来方便的定位某个媒体设备:

not:排除某些特定的媒体类型

@media not print and (color){
}

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

@media only screen and (color){
}

 

media query支持的属性

media query是为了更好的适配各种设备而生的,所以随着移动互联网的发展,它将得到更多的重视。

属性 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使用方法

方法一:

<link type="text/css" href="iphone.css" rel="stylesheet" media="screen and (max-width:480px)" />

方法二:

@media screen and (max-width:480px){
	body{background:#000;}
}

demo:http://rainleaves.com/demo/media/index.html

今天有研究media query,最大的一个原因是在响应式网页设计中用到了这个属性,所以借些机会来了解一下,因为了解的不是很透彻,在以后的时间里还会继续研究,希望对大家有所帮助。

马上分享给你的朋友吧~

media type媒体类型和media query 媒体查询》上有 1 条评论

  1. 杭州最好的KTV是哪儿?杭州东方魅力www.mote188.com
    杭州最好的夜场是哪儿?首选杭州东方魅力www.dongfangmeili.net
    杭州夜场招聘首选杭州东方魅力?www.mote188.com

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>