NAXS网

首页 > 网络 > CSS / 正文

CSS 媒体类型

admin 2020-01-22 CSS 评论

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


媒体类型

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


@media 规则

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

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

实例

@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;}}


尝试一下 »

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


其他媒体类型

注意:媒体类型名称不区分大小写。

媒体类型描述
all用于所有的媒体设备。
aural用于语音和音频合成器。
braille用于盲人用点字法触觉回馈设备。
embossed用于分页的盲人用点字法打印机
handheld用于小的手持的设备。
print用于打印机。
projection用于方案展示,比如幻灯片。
screen用于电脑显示器
tty用于使用固定密度字母栅格的媒体,比如电传打字机和终端。
tv用于电视机类型的设备。

推荐您阅读更多有关于“CSS”的文章

  • 常用CSS代码大全 CSS

    常用CSS代码大全

    用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用。...

    21416 2020-01-26
  • CSS 实例 CSS

    CSS 实例

    CSS 实例CSS背景设置页面的背景颜色设置不同元素的背景颜色设置一个图像作为页面的背景错误的背景图片如何在水平方向重复背景图像如何定位背景图像一个固定的背景图片...

    136 2020-01-22
  • CSS 总结 CSS

    CSS 总结

    你已经学习了CSS,下一步学习什么呢?CSS 总结本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。...

    96 2020-01-22
  • CSS属性 CSS

    CSS属性

    CSS 属性 选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是class和id。注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器...

    60 2020-01-22
  • CSS 图像拼合技术 CSS

    CSS 图像拼合技术

    CSS 图像拼合技术图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。...

    122 2020-01-22
  • CSS 图像透明/不透明 CSS

    CSS 图像透明/不透明

    CSS 图像透明/不透明...

    98 2020-01-22
热门浏览
热门标签
生肖 排行榜 游戏 十二生肖 淘宝 WORD 节日 攻略 Excel 小说 抖音 句子 原神 win10 手机 云顶之弈 梦幻西游 SEO ppt 故事 排行 英雄联盟 微信 经典 意思 WPS 赚钱 觅长生 大全 什么 和平精英 疫情地图 百度地图 王者荣耀 春节 推荐 光遇 诗句 Win7
最新评论