首页 > css教程 > 正文

css中媒体查询是什么?怎么使用?

原创 2018-11-09 10:38:20 0 963
赞助会员专享特权
本篇文章给介绍媒体查询是什么?怎么使用?让大家了解媒体查询的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

媒体查询是什么?有什么用?

媒体查询限制CSS样式的范围,以便仅在满足某些媒体条件时才适用。

简单来说:媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式。

媒体查询可用于检测的媒体特性,比如: width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。【相关视频教程推荐:css3教程

媒体查询是怎么使用的?

我们可以将媒体查询视为浏览器的if-else语句来解释,媒体查询是评估为真或假的逻辑表达式。媒体查询包括可选的媒体类型、零个或多个媒体特性以及允许构造更复杂表达式的逻辑关键字。

1、基本语法:

@media [not | only] <media-type> [and] (<media-condition>);

说明:

media-type(媒体类型)

媒体类型是可以显示HTML文档的广泛类别的用户代理设备。媒体类型列表已在媒体查询级别4规范中进行了修订。已弃用的媒体类型被识别为有效,但不会与任何设备匹配,即您的媒体查询仍将适用,但在所有设备上都应用,就像没有指定媒体类型一样。

可以设置以列的媒体类型:

all:匹配所有设备。

print:匹配打印机和用于再现打印显示的设备,例如在“预览”中显示文档的Web浏览器。

screen:匹配所有与打印或语音不匹配的设备。

speech:匹配屏幕阅读器和“读出”页面的类似设备。

media-condition(媒体功能)

媒体功能比媒体类型更精细,因为它针对相关设备设置单个特定功能。媒体功能的语法与CSS属性相同,包括功能名称,冒号和要测试的值都相同。

媒体功能列表也已从介质查询级别3更改为介质查询级别4;已弃用的功能已保留在规范中以便向后兼容,但强调它们不得用于新样式表。用户代理仍将按指定继续支持它们。

可以设置以列的媒体功能:

屏幕/设备的尺寸:
width
height
aspect-ratio
orientation

显示质量:
resolution
scan
grid
update
overflow-block
overflow-inline

颜色:
color
color-index
monochrome
color-gamut

相互作用:
pointer
hover
any-pointer 和 any-hover

脚本:
scripting:

2、媒体查询的使用示例:

实现CSS响应式媒体查询

例:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

说明:

该段媒体查询的意思是:当设备屏幕宽度在320px~~720px之间时,媒体查询设置body的背景色(background-color:red;)会重叠之前的body背景色;当设备屏幕宽度在320px以下时,媒体查询可以设置body的背景色(background-color:blue;),同样会重叠之前的body背景色。

css @media查询的浏览器支持

基于媒体信息应用样式的方法,包括页面和设备尺寸等内容。

可以支持以下版本:

1.jpg

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是css中媒体查询是什么?怎么使用?的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:css3 @media 媒体查询
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 像素和CSS媒体查询?
  • 深入理解CSS Media媒体查询
  • CSS用@media媒体查询进行响应式设计,什么是媒体查询
  • 分享几个媒体查询@media实现自适应的关键分辨率
  • css中媒体查询是什么?怎么使用?
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    怎么在Python中不换行的输出 397
    Python2和Python3之间有什么区别 1028
    使用Python可以做什么 958

    相关视频教程

  • CSS3从入门到精通教程 CSS3从入门到精通教程
  • 快速玩转CSS3教程 快速玩转CSS3教程
  • CSS3 最新视频教程 CSS3 最新视频教程
  • HTML5和CSS3扁平化风格博客教程 HTML5和CSS3扁平化风格博客教程
  • 相关视频章节