css媒体查询有什么用？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

使用@media查询，你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS媒体查询概念

CSS媒体查询即media quaries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率定义不同的样式。

• 1024分辨率以上适用于：PC端

• 1024~768分辨率以上适用于：Pad pro

• 768~450分辨率以上适用于：Pad mini，mobile横屏

• 450分辨率以下适用于：mobile竖屏

CSS媒体查询语法

当分辨率>=500px的时候，会识别大括号里面的代码

@media all and (min-width:500px){
#box{ background:skyblue;}
}

当分辨率<=500px的时候，会识别大括号里面的代码

@media all and (max-width:500px){
#box{ background:skyblue;}
}
@media all and (min-width:500px) and (max-width:800px){
#box{ background:skyblue;}
}
@media print and (min-width:300px){
#box{ background:skyblue;}
p{ text-decoration: underline;}
}

当分辨率<500px的时候，会识别大括号里面的代码 , not条件反过来 , 针对分辨率的

@media not all and (min-width:500px){
#box{ background:skyblue;}
}
@media all and (max-width:1000px){
#box{ background:skyblue;}
}
@media all and (max-width:600px){
#box{ background:green;}
}

当前的分辨率是800?

只有竖屏下，才会触发大括号中的代码

@media all and ( orientation:portrait ){
#box{ background:skyblue;}
}

只有横屏下，才会触发大括号中的代码

@media all and ( orientation:landscape ){
#box{ background:skyblue;}
}

更多web开发知识，请查阅 HTML中文网 ！！

以上就是css媒体查询有什么用？的详细内容，更多请关注易知道|edz.cc其它相关文章！