CSS3媒体查询@media笔记

使用@media查询,你可以针对不同媒体类型定义不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
语法:
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
也可以针对不同的媒体使用不同的 stylesheets
    <link rel='stylesheet' media='mediatype and|not|only (media feature)' href=''>

注意:主样式在前,媒体查询在后,因为css是层叠样式表,在同一特殊性下,靠后的样式会重叠前面的样式

实例

如果文档宽度小于300像素则修改背景颜色
@media screen and (max-width: 300px) {
    body {
	    background-color:lightblue;
	}
}

媒体类型
	all				用于所有设备
	aural			已废弃,用于语音和声音合成器
	braille			已废弃,应用于盲文触摸式反馈设备
	embossed		已废弃,用于打印的盲人印刷设备
	handheld		已废弃,用于掌上设备或更小的装置，如PDA和小型电话
	print			用于打印机和打印预览
	projection		已废弃,用于投影设备
	screen			用于电脑屏幕,平板电脑,智能手机等。
	speech			应用于屏幕阅读器等发声设备
	tty				已废弃.用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
	tv				已废弃,用于电视和网络电视
媒体功能
	aspect-ratio		定义输出设备中的页面可见区域宽度与高度的比率
	color				定义输出设备每一组彩色原件的个数.如果不是彩色设备,则值等于0
	color-index			定义在输出设备的彩色查询表中的条目数,如果没有使用彩色查询表,则值等于0
	device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率
	device-height		定义输出设备的屏幕可见高度
	device-width		定义输出设备的屏幕可见宽度
	grid				用来查询输出设备是否使用栅格或点阵
	height				定义输出设备中的页面可见区域高度
	max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率
	max-color			定义输出设备每一组彩色原件的最大个数
	max-color-index		定义在输出设备的彩色查询表中的最大条目数
	max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率
	max-device-height	定义输出设备的屏幕可见的最大高度
	max-device-width	定义输出设备的屏幕最大可见宽度
	max-height			定义输出设备中的页面最大可见区域高度
	max-monochrome		定义在一个单色框架缓冲区中每像素包含的最大单色原件个数
	max-resolution		定义设备的最大分辨率
	max-width			定义输出设备中的页面最大可见区域宽度
	min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率
	min-color			定义输出设备每一组彩色原件的最小个数
	min-color-index		定义在输出设备的彩色查询表中的最小条目数
	min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率
	min-device-width	定义输出设备的屏幕最小可见宽度
	min-device-height	定义输出设备的屏幕的最小可见高度
	min-height			定义输出设备中的页面最小可见区域高度
	min-monochrome		定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
	min-resolution		定义设备的最小分辨率
	min-width			定义输出设备中的页面最小可见区域宽度
	monochrome			定义在一个单色框架缓冲区中每像素包含的单色原件个数,如果不是单色设备,则值等于0
	orientation			定义输出设备中的页面可见区域高度是否大于或等于宽度
	resolution			定义设备的分辨率.如:96dpi, 300dpi, 118dpcm
	scan				定义电视类设备的扫描工序
	width				定义输出设备中的页面可见区域宽度