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媒体查询有什么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏