css笔记——媒体查询(media query)

什么是媒体查询

媒体查询是CSS代码的容器，其中的css只在某些条件（比如，当前页面要被打印或者显示在某种类型或尺寸的屏幕上）才会应用。也就是让css可以在不同的屏幕中显示不同的样式

常用媒体类型

all（default）
screen / print / speech

媒体查询的逻辑

与（and）

@media screen and (min-width:900px) and (max-width:1024px){
	//css样式
}

或（，）

@media screen and (min-width:1024px),(max-width:900px){
	//css样式 （and）优先级大于（，）
}

非（not）

@media not screen and (min-width:1024px),(max-width:900px){
	//css样式 
}

注意：优先级 （and）大于（not）大于（，）

媒体特征表达式

width /max-width/min-width
-webkit-device-pixel-ratio 像素比
-webkit-max-device-pixel-ratio
-webkit-min-device-pixel-ratio
orientation 方向 值：landscape 横屏/ portrait 竖屏