ylbtech-CSS：CSS 媒体类型
1.返回顶部
1、

CSS 媒体类型

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

媒体类型

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

@media 规则

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

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

<html>

<head>

<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>

</head>

<body>

....

</body>

</html>

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

其他媒体类型

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

媒体类型 描述
all 用于所有的媒体设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv 用于电视机类型的设备。
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

CSS：CSS 媒体类型的更多相关文章

  1. CSS 媒体类型

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

  2. CSS 媒体类型 总结

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

  3. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  4. IE9 "CSS 因 Mime 类型不匹配而被忽略“问题

    写页面的时候在chrome,fireforks等页面上显示正常,但是换成IE9之后就完全没有样式了.IE真是个奇葩的怪胎.它的报错信息是’CSS 因 Mime 类型不匹配而被忽略‘,也就是说所有的.c ...

  5. css因Mime类型不匹配而被忽略,怎么解决

    问题:在火狐.谷歌都可以正常显示出来,在别人的IE浏览器上也可以正常显示出来,但是在自己的ie浏览器就完全不能加载的熬样式了 控制台报告 SEC7113: CSS 因 Mime 类型不匹配而被忽略 答 ...

  6. 解决IE下CSS因 Mime 类型不匹配而被忽略的问题

    写页面的时候在chrome,firefox等页面上显示正常,但是换成IE9之后就完全没有样式了,报错信息是CSS 因 Mime 类型不匹配而被忽略,下面与大家分享下这个问题的相关的回答.IE真是个奇葩 ...

  7. CSS Media媒体查询使用大全，完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  8. IE9,IE10 CSS因Mime类型不匹配而被忽略问题 (转)

    写页面的时候在chrome,fireforks等页面上显示正常,但是换成IE9,IE10之后就完全没有样式了,报错信息是CSS 因 Mime 类型不匹配而被忽略,下面与大家分享下这个问题的相关的回答 ...

  9. 样式link属性media用法--媒体类型查询

    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...

随机推荐

  1. Android学习--写一个发送短信的apk，注意布局文件的处理过程！！！

    刚开始写Android程序如图发现使用了findViewById方法之后输出的话居然是null(空指针错误),也就是说这个方法没有成功.网上说这样写是在activity_main .xml去找这个ID ...

  2. 分布式系统理论基础4：Paxos

    本文转自:https://www.cnblogs.com/bangerlee/p/5655754.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...

  3. SpringMVC架构实现原理

    SpringMVC架构实现原理 一.SpringMVC介绍 Spring mvc是一个基于mvc的web框架.其中核心类是DispatcherServlet,它是一个Servlet,顶层是实现的Ser ...

  4. Android Studio遇到了“No USB devices or running emulators detected”

    我这里遇到的情况是adb interface 错误:未安装,在这个网站: http://adbdriver.com/downloads/ 下载了Automated installation(Unive ...

  5. js一些if语句判断条件为fasle的情况

    js一些if语句判断条件为fasle的情况 之前有写一个if判断条件产生的bug,当时写逻辑处理数据是在后台给接口之前,所以自己拟定了字段值为number类型的0或者1来进行判断,最后接口出来的时候是 ...

  6. sass揭秘之@mixin，%，@function scss基本使用及操作函数

    sass揭秘之@mixin,%,@function: 地址:https://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder. ...

  7. 自动化监控Zabbix之主机自动发现

    创建思路 首先说下自动发现强大的功能,它到底可以帮助我们完成什么工作: 快速发现并添加主机 简单的管理 随着环境的改变而快速搭建监控系统 自动发现基于网络发现功能,而网络发现又基于以下信息: IP地址 ...

  8. 【java】记录一下java的常用用法

    1.二维数组 public static void main(String[] args) { //定义 int a[][] = {{1,2,3},{4,5,6},{7,8,9}}; int [][] ...

  9. pytest框架结构运行规则及命名方式

    Pytest框架结构 Import pytest 类似的setup,teardown同样更灵活,还有个session() 模块级 (setup_module/teardown_module) 不在类中 ...

  10. SQL查询条件生成小工具

    最近运维数据,经常遇到需要在sql条件中个In('',''....)个字符串的情况,于是在网上找了个小工具改造一下,先用着: 效果如图: using System; using System.Coll ...