css中媒体查询指的是什么-创新互联

这篇文章主要介绍css中媒体查询指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

正蓝ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

                              本篇文章给介绍媒体查询是什么?怎么使用?让大家了解媒体查询的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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

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

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

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

媒体查询是怎么使用的?

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

1、基本语法:

@media [not | only]  [and] ();

media-type(媒体类型)


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

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

all:匹配所有设备。

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

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

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

媒体功能比媒体类型更精细,因为它针对相关设备设置单个特定功能。媒体功能的语法与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:

实现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中媒体查询指的是什么

以上是css中媒体查询指的是什么的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站标题:css中媒体查询指的是什么-创新互联
URL分享:http://bzwzjz.com/article/cchgso.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站建设方案 定制级高端网站建设 自适应网站设计 成都网站建设 高端网站设计推广 成都商城网站制作 成都定制网站建设 手机网站建设 成都网站设计 网站设计 成都模版网站建设 响应式网站建设 高端网站设计 专业网站设计 成都网站建设 成都响应式网站建设公司 网站设计 企业网站建设 手机网站建设 成都网站制作 成都网站建设 高端网站建设