【CSS】媒体类型

你的名字 2022-03-21 14:46 228阅读 0赞

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

### 媒体类型 ###

一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

### @media 规则 ###

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

<style>
    	@media screen
    	{
    	    p.test {font-family:verdana,sans-serif;font-size:14px;}
    	}
    	@media print
    	{
    	    p.test {font-family:times,serif;font-size:10px;}
    	}
    	@media screen,print
    	{
    	    p.test {font-weight:bold;}
    	}
    </style>

你可以自己尝试看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+ 打印此页，你会看到，媒体类型将使用另一种比其他文本字体大小小点的字体显示。

### 其他媒体类型 ###

注意：媒体类型名称不区分大小写。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220321/96e1ae6aff1e41cab9f423cc9a0e4454.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML&CSS Day09 CSS媒体查询

文章目录媒体查询 \- 什么是媒体查询？ \- 媒体查询与弹性盒布局的适用情况 \- 使用方法 @me

快来打我*/ 2024年03月16日 16:25/ 0 赞/ 20 阅读

相关 css基础 CSS 媒体类型、CSS 属性选择器、CSS 表单、CSS 计数器

阅读目录 CSS 媒体类型媒体类型 @media 规则其他媒体类型 CSS 属性选择器属性选择器

迈不过友情╰/ 2023年10月06日 22:33/ 0 赞/ 75 阅读

相关 css3媒体查询尺寸

转自：https://www.cnblogs.com/pangchunyu/p/11557487.html css3媒体查询尺寸 PC端按屏幕宽度大小排序（主流的用

短命女/ 2022年12月03日 09:14/ 0 赞/ 254 阅读

相关 CSS媒体查询

不同设备：用法： @media screen{ } 可选值：all 所有设备；screen 屏幕；print 打印机；speech 屏

小鱼儿/ 2022年09月04日 14:43/ 0 赞/ 309 阅读

相关 CSS3媒体查询

经验不足的前端人员在头几次面对一大堆兼容性问题时往往手足无措，有时候一个样式的兼容性问题我们不需要去这种写一个能匹配所有设备的CSS样式，而是可以完全针对不同特性的设备编写不同

深碍√TFBOYSˉ_/ 2022年07月14日 12:50/ 0 赞/ 276 阅读

相关 CSS媒体详解

CSS媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 --------------------

秒速五厘米/ 2022年05月21日 11:59/ 0 赞/ 230 阅读

相关【CSS】媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。媒体类型一些 CSS 属性只设计了某些媒体。例如 voi

你的名字/ 2022年03月21日 14:46/ 0 赞/ 229 阅读

相关 CSS基础学习 20.CSS媒体查询

![1105922-20190619113632620-1172695636.png][] 转载于:https://www.cnblogs.com/songson

布满荆棘的人生/ 2021年11月04日 11:48/ 0 赞/ 326 阅读

相关 CSS媒体查询

\\\css3媒体查询 css3媒体查询是响应式方案核心 \\\媒体类型 all 所有媒体（默认值） screen 彩色屏幕 print 打印预览

蔚落/ 2021年10月24日 00:32/ 0 赞/ 368 阅读

相关 css属性之媒体类型详细介绍

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（...

小灰灰/ 2020年04月29日 06:10/ 0 赞/ 909 阅读