CSS媒体查询(@media)全面解析

这篇具有很好参考价值的文章主要介绍了CSS媒体查询(@media)全面解析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。

媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件,让所有用户都能得到很好的用户体验。

1. 媒体类型

媒体类型用来表示设备的类别,CSS 中提供了一些关键字来表示不同的媒体类型,如下表所示:

媒体类型 描述
all 表示所有的媒体设备
aural (听觉的,听的)表示语音和音频合成器(听觉设备)
braille (用盲文写的)表示盲人用点字法触觉回馈设备
embossed 表示盲人用点字法打印机
handheld 表示小型手持设备,如手机、平板电脑
print 表示打印机
projection 表示投影设备
screen 表示电脑显示器
tty 表示使用固定密度字母栅格的媒体,比如打字机或终端设备
tv 表示电视机类型的设备

2. 媒体特性

除了具体的类型外,还可以通过一些属性来描述设备的具体特征,例如宽度、高度、分辨率等,如下表所示:

描述
aspect-ratio (纵横比)输出设备页面可见区域的宽高比
color 输出设备每个像素的比特值,常见的有 8、16、32 位。如果设备不支持输出彩色,则该值为 0
color-index 输出设备的颜色查询表中的条目数量。如果没有使用颜色查询表,则该值等于 0
device-aspect-ratio 输出设备的宽高比
device-height 输出设备屏幕的可见高度
device-width 输出设备屏幕的可见宽度
grid 查询输出设备使用的是网格屏幕还是点阵屏幕
height 页面可见区域的高度
max-aspect-ratio 输出设备屏幕可见区域宽度与高度的最大比率
max-color 输出设备每个像素比特值的最大值
max-color-index 输出设备的颜色查询表中的最大条目数
max-device-aspect-ratio 输出设备屏幕可见区域宽度与高度的最大比率
max-device-height 输出设备屏幕可见区域的最大高度
max-device-width 输出设备屏幕的最大可见宽度
max-height 页面可见区域的最大高度
max-monochrome 输出设备单色帧缓冲区中每个像素的最大位深度。如果设备并非黑白屏幕,则该值为 0
max-resolution 设备的最大分辨率
max-width 页面可见区域的最大宽度
min-aspect-ratio 输出设备屏幕可见区域宽度与高度的最小比率
min-color 输出设备每个像素比特值的最小值
min-color-index 输出设备的颜色查询表中的最小条目数
min-device-aspect-ratio 输出设备的屏幕可见区域宽度与高度的最小比率
min-device-width 输出设备的屏幕的最小可见宽度
min-device-height 输出设备的屏幕的最小可见高度
min-height 页面可见区域的最小高度
min-monochrome 输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕,则该值为 0
min-resolution 设备的最小分辨率
min-width 页面可见区域的最小宽度
monochrome 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕,则该值为 0
orientation 页面可见区域的旋转方向
resolution 设备的分辨率。如:96dpi、300dpi、118dpcm
scan 电视类设备的扫描工序
width 页面可见区域的宽度

3. 逻辑操作符

逻辑操作符包含 not、and 和 only 三个,通过逻辑操作符可以构建复杂的媒体查询,您还可以通过逗号来分隔多个媒体查询,将它们组合为一个规则。

  • and:用于将多个媒体查询组合成一条媒体查询,当每个查询规则都为真时则该条媒体查询为真,另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起;
  • not:用于否定媒体查询,当查询规则不为真时则返回 true,否则返回 false。如果使用 not 操作符,则还必须指定媒体类型;
  • only:仅在整个查询匹配时才会生效,当不使用 only 时,旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen,忽略查询的其余部分,并将样式应用于所有屏幕。 如果使用 only 运算符,则还必须指定媒体类型。

4. 定义媒体查询

目前您可以通过以下两种方式来定义媒体查询:

  • 使用 @media 或 @import 规则在样式表中指定对应的设备类型;
  • 用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

1) @media

在《CSS @规则》一节中我们已经简单了解 @media,使用 @media 您可以指定一组媒体查询和一个 CSS 样式块,当且仅当媒体查询与正在使用的设备匹配时,指定的 CSS 样式才会应用于文档。示例代码如下:

/* 在小于或等于 992 像素的屏幕上,将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
 
/* 在 600 像素或更小的屏幕上,将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

2) @import

@import 用来导入指定的外部样式文件并指定目标的媒体类型,示例代码如下:

@import url("css/screen.css") screen;   /* 引入外部样式,该样式仅会应用于电脑显示器 */
@import url("css/print.css") print;     /* 引入外部样式,该样式仅会应用于打印设备 */
body {
    background: #f5f5f5;
    line-height: 1.2;
}

注意:所有 @import 语句都必须出现在样式表的开头,而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。

3) media 属性

您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询,示例代码如下:

/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

 提示:在 media 属性中您还可以指定多种媒体类型,每种媒体类型之间使用逗号进行分隔,例如 media="screen, print"。文章来源地址https://www.toymoban.com/news/detail-709081.html

到了这里,关于CSS媒体查询(@media)全面解析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 多媒体API

    许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 前端系列文章——传送门 后端系列文章——传送门 video 只接受几种视屏格式:ogg、mp4、avi 基本使用: controls属性,出现

    2024年02月02日
    浏览(56)
  • 多媒体音频焦点浅析

    多个音源可以同时向同一个输出流进行播放音频,如果没有音频焦点管控,就会出现多个音源同时播放的现象,给用户带来不便;而Android为了避免多个音源同时播放,就引入了音频焦点的概念,所有音频应用都统一按照音频焦点的规定执行,就可以避免该现象发生。 当应用

    2024年02月13日
    浏览(45)
  • AIGC生成多媒体流程

    给定 生成多个故事标题 多个故事标题进行反向推导出 再生成标题 直到达到一个相似度 多个标题固定总结合并为一个标题 根据生成故事多个章节标题 多个章节标题反向生成一个标题 对比前后两个标题相似度 不断重复直到达到一定相似度 第一个章

    2024年02月12日
    浏览(48)
  • 多媒体开发之cgo

         go语言作为近十年来优秀的现代开发语言的代表,由于继承了c语言的简洁和很多现代语言的表达方式,在广泛的应用场景中得到众多爱好者的喜爱,如何将go和c、c++进行联合开发,拓展整个开发生态,不用重复造轮子,掌握cgo可以让你得心应手的在c和go之间传递信息,

    2024年02月16日
    浏览(45)
  • 计算机网络——多媒体网络

    通俗易懂,风趣幽默,忍不住分享一下给大家, 跳转到网站 我的计算机网络专栏,是自己在计算机网络学习过程中的学习笔记与心得,在参考相关教材,网络搜素的前提下,结合自己过去一段时间笔记整理,而推出的该专栏,整体架构是根据计算机网络 自顶向下 方法而整理

    2024年02月20日
    浏览(36)
  • 鸿蒙实战多媒体运用:【音频组件】

    音频组件用于实现音频相关的功能,包括音频播放,录制,音量管理和设备管理。 图 1  音频组件架构图 基本概念 采样 采样是指将连续时域上的模拟信号按照一定的时间间隔采样,获取到离散时域上离散信号的过程。 采样率 采样率为每秒从连续信号中提取并组成离散信号

    2024年03月10日
    浏览(79)
  • Java UI组件和多媒体

    目录 1、使用单选按钮 2、选择几何图形  3、交通信号灯  4、演示TextField的属性 5、演示TextArea的属性 6、选择一种字体  7、演示 Label 的属性  8、使 用ComboBox 和 ListView  9、使 用 ScrollBar 和 Slider    10、模拟:一个转动的风扇 编写一个 GUI 程序如图所示 。 可以使用按钮将消

    2024年02月09日
    浏览(46)
  • HTML5多媒体单元测试

    (单选题, 10.0分) 为元素指定多个视频源使用( )标签(元素)。 A select B datalist C source D src (单选题, 10.0分) 判断浏览器是否支持指定的媒体类型需用到audio或video对象的( )方法。 A load() B play() C pause() D canPlayType() (多选题, 10.0分) HTML5新增了强大的多媒体的功能,主要体现在

    2024年02月04日
    浏览(44)
  • 多媒体数据处理实验2:PCA

    1. 算法描述 功能:  利用PCA算法可以对给定的数据集进行降维操作,使得处理后的数据不仅维数较低、能保存绝大部分信息,而且各维之间的相关性也为0(没有冗余信息,正交)。 2. PCA的数学原理 (1) PCA的目的   一般而言,一个未经处理的数据集可能存在两个问题,一个

    2023年04月24日
    浏览(85)
  • 设计HTML5图像和多媒体

    在网页中的文本信息直观、明了,而多媒体信息更富内涵和视觉冲击力。恰当使用不同类型的多媒体可以展示个性,突出重点,吸引用户。在HTML5之前,需要借助插件为网页添加多媒体,如Adobe Flash Player、苹果的QuickTime等。HTML5引入原生的多媒体技术,设计多媒体更简便,用户

    2024年02月12日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包