站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

css3媒体查询的语法关键字是什么

时间:2022-01-15 [网络编程]作者:fabuyuan 浏览:7 次

css3媒体查询的语法关键字是“@media”,它允许为页面设置不同的媒体条件,并根据条件来应用相应的样式;基本语法格式为“@media mediatype and|not|only(media feature) {CSS-Code;}”。

css3媒体查询的语法关键字是什么

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

媒体查询(Media Queries)是CSS3中提出的一个新概念,它允许为页面设置不同的媒体条件,并根据条件来应用相应的样式。

css3媒体查询的语法关键字是“@media”。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

语法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

only 用来限定整个查询结果,not 用对整个查询结果取反。如果使用关键字 not 或 only,必须明确指定一个媒体类型,并且关键字必须位于整个媒体查询语句的开头。

1)and

关键字 and 用来把媒体类型和多个媒体特性的表达式组合起来,合并到同一条媒体查询中。只有当媒体类型和每个表达式的结果都为真时,查询结果才为真。如:

screen and (min-width: 700px) and (orientation: landscape)

媒体查询的结果是一个布尔值:要么为true,要么为false。只有当 and 连接的所有部分都为true,整条媒体查询语句的结果才为 true。

媒体查询也可以看作是对浏览器的提问。上述媒体查询首先会问“你是一块显示器吗?”,如果浏览器回答“是”,会继续问“你的最小宽度为700像素吗?”,如果浏览器回答“是”,再继续问“你的屏幕处于横向状态吗?”。只有当三个提问都回答“是”, 整条媒体查询语句的结果才为 true。

2)only

关键字 only用来限定范围,它将作用于整个查询结果。如:

only screen and (color)

就仅仅对彩色显示屏设备有效,对其他任何设备均无效。它等价于:

not (screen and (color))

3)not

关键字not用来对整个查询结果取反。如:

not (screen and (monochrome))

就表示除单色显示屏设备外的所有设备。它等价于:

not (screen and (monochrome))

而不是:

(not screen) and (monochrome)

除了单个查询外,也可以定义一个媒体查询的列表,列表之间用逗号隔开。如果列表中的任意一个媒体查询的结果为 true,媒体查询的列表的结果就为 true;否则,媒体查询的列表的结果就为 false。

媒体查询列表中的每个查询相互独立,一个查询中的操作符并不影响其它的媒体查询。因此,媒体查询列表能作用于不同的媒体类型和媒体属性。如:

(min-width: 700px), handheld and (orientation: landscape)

上述媒体查询列表中包含两个媒体查询,对于最小宽度为700像素的任何设备,或者横屏的手持设备,媒体查询列表的结果为 true,其他情况均为 false。

有了媒体查询,就可以使用它来构建响应式布局了。有两种使用媒体查询的方法:一种是使用 @media 规则,选择载入不同的CSS代码;一种是使用 <link> 标签的 media 属性,选择加载不同的样式表文件。

设置媒体查询

1)使用 @media 规则

使用 @media 规则,要在同一个CSS 文件中,根据不同的媒体条件,定义不同的样式。用户浏览网页时,浏览器会根据媒体查询的结果,选择应用哪一段CSS代码。

@media 规则的语法,是在 @media后,紧跟媒体类型和媒体特性,然后是一对大括号,在大括号中定义相应的样式规则。如:

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px,将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px,将会应用这里的 CSS 代码 */
}

根据样式的层叠性,样式表中后定义的样式,会覆盖前面的相同样式。因此,就可以在样式表的开头定义基本样式,来适应所有的设计,再使用媒体查询重写相应的部分,让不同的媒体条件应用不同的样式规则。

2)使用 <link> 标签的 media 属性

使用 <link> 标签的 media 属性时,针对不同的媒体条件,定义不同的样式表文件,浏览器会根据媒体查询的结果,加载不同的样式表文件。

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

这里定义了3个样式表文件reset.css、phone.css、screen.css,并让所有的显示屏设备都加载reset.css,让视口宽度小于 480px 的显示屏设备加载phone.css,让视口宽度大于768px的显示屏设备加载screen.css。

可以看出,使用第一种方法,要在同一个CSS 文件中,写好几遍 @media;使用第二种方法,要写好几遍 <link> 标签。两种方法的效果相同,可以选择自己喜欢的方式。

事实上,还可以是CSS的 @import 指令按条件引入其他样式表。如,以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

@import url("small.css") screen and (max-width: 360px);

但是,使用CSS的 @import 方式会增加HTTP请求,这会影响页面的加载速度,因此并不推荐使用这种方法。

在媒体查询中,把设备宽度的临界点称作断点,并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述,媒体查询就是使用断点来创建媒体查询的条件,并为每个断点调用一个样式表文件(或样式代码),来实现在不改变页面内容的情况下,为不同的设备及不同尺寸的设备定制显示效果。

说明:让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用,并得到所有现代浏览器的支持,但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本,让它们支持媒体查询功能。

respond.js(https://github.com/scottjehl/Respond)是一个快速、轻量的 Javascript 工具,它会遍历页面上的所有 CSS 引用,并使用媒体查询分析 CSS 规则。然后,监控浏览器宽度的变化,并添加或删除与媒体查询匹配的样式,使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单,只需在页面所有的CSS之后,使用IE条件注释,让IE6-8版本加载 respond.js 脚本即可:

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意,respond.js 无法解析CSS的@import指令。因此,建议在已有的样式表中追加媒体查询的样式。如,在样式表文件中,使用 min-width 或 max-width 定义媒体查询:

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

(学习视频分享:css视频教程

以上就是css3媒体查询的语法关键字是什么的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css3媒体查询

转载请注明来源:css3媒体查询的语法关键字是什么

本文永久链接地址:https://www.adminjie.com/post/7689.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • HTML里怎么设置thead表头的颜色

      HTML里怎么设置thead表头的颜色

      HTML中设置thead表头颜色的方法:1、使用“thead{color:颜色值;}”语句设置表头的字体颜色;2、使用"thead{background:...

    • 演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是ppt,一套完整的演示文稿文件一般包含片头动画、PPT封面、前言、目录、过渡页、图表页、图片页、文字页、封底、片尾动画等。本文...

    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    • php5.6.31如何编译安装

      php5.6.31如何编译安装

      php5.6.31编译安装的方法:1、添加epel源;2、安装依赖;3、下载并解压php5.6.31;4、修改php-fpm.conf;5、启动php-fpm即...

    热门文章