css媒体查询screen

CSS媒体查询（Media Query）是CSS3引入的一种技术，允许开发者根据不同的设备特性（如屏幕尺寸、分辨率、方向等）应用不同的样式规则，screen是其中最常用的媒体类型之一，用于针对屏幕设备进行样式定制。

一、基本语法

CSS媒体查询的基本语法如下：

@media mediatype and|not|only (media feature) {
    /* CSS 规则 */
}

mediatype: 指定媒体类型，如screen、print等，对于屏幕设备，通常使用screen。

media feature: 定义媒体特性和值的条件，如minwidth、maxwidth、orientation等。

二、常用媒体特性

1、宽度和高度

width、minwidth、maxwidth: 定义输出设备的页面可见区域宽度。

height、minheight、maxheight: 定义输出设备的页面可见区域高度。

示例

		@media screen and (maxwidth: 600px) {
		    body {
		        backgroundcolor: lightblue;
		    }
		}

* 当屏幕宽度小于等于600像素时，页面背景颜色变为浅蓝色。

2、屏幕方向

orientation: 定义设备方向，portrait（竖屏）和landscape（横屏）。

示例

		@media screen and (orientation: landscape) {
		    #sidebar {
		        display: none;
		    }
		}

* 当设备处于横向模式时，隐藏侧边栏。

3、分辨率

resolution: 定义设备的分辨率，通常与高分辨率屏幕（如Retina屏幕）相关。

示例

		@media screen and (minresolution: 2dppx) {
		    .logo {
		        backgroundimage: url('logo@2x.png');
		    }
		}

* 在高分辨率屏幕上，使用更高清的图片作为背景。

4、颜色和颜色索引

color: 指定输出设备中每个像素的比特值，如果设备不支持输出颜色，则该值等于0。

colorindex: 指定输出设备中颜色查询表中的条目数量，如果没有使用颜色查询表，则该值等于0。

5、其他

pointer: 检测用户是否使用了指点设备（如鼠标、触控笔），它有三个可能的值none（表示设备没有指点能力）、coarse（表示设备使用粗略的指点设备，如手指）、fine（表示设备使用精确的指点设备，如鼠标）。

示例

		@media (pointer: fine) {
		    body {
		        cursor: pointer;
		    }
		}

* 适用于使用精确指点设备的设备，如鼠标。

三、逻辑运算符

在CSS媒体查询中，可以使用以下逻辑运算符来组合媒体条件：

1、and：表示所有条件都必须满足。

	@media screen and (minwidth: 768px) and (orientation: portrait) {
	    body {
	        backgroundcolor: lightgreen;
	    }
	}

* 只有当设备宽度大于等于768px且为竖屏时，才应用特定的样式。

2、not：表示条件不满足时应用样式。

	@media not screen and (maxwidth: 768px) {
	    body {
	        backgroundcolor: gray;
	    }
	}

* 在非屏幕设备或屏幕宽度大于768px的设备上应用样式。

3、逗号（,）：表示多个条件中任一满足时应用样式。

	@media screen and (minwidth: 1024px), screen and (orientation: landscape) {
	    body {
	        backgroundcolor: lightyellow;
	    }
	}

* 适用于宽度大于等于1024px的设备或横屏设备。

四、注意事项

1、媒体条件排序：当使用minwidth和maxwidth作为判断条件时，应确保条件范围从小到大或从大到小排序，以避免样式覆盖问题。

2、样式冲突：确保@media查询中的样式不被后面的CSS规则所覆盖，建议将@media查询的样式写在后面。

3、meta标签：为了确保移动设备能正确渲染页面，建议在HTML头部添加以下meta标签：

	<meta name="viewport" content="width=devicewidth, initialscale=1.0">

4、语法错误：确保@media查询的语法正确，特别是逻辑运算符后的空格和括号内不要写结束符“;”。

五、相关问题与解答

1、什么是媒体查询？

答：媒体查询是CSS提供的一种机制，用于根据设备的特性条件动态应用不同的样式，它是实现响应式布局的重要工具。

2、媒体查询能检测哪些设备特性？

答：媒体查询可以检测屏幕宽度、高度、分辨率、方向（横屏或竖屏）、颜色深度等特性。