CSS 媒体类型

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

一、媒体类型

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

二、@media 规则

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

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

tml>

<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"将使用另一种比其他文本字体大小小点的字体显示。

三、其他媒体类型

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

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

  1. CSS 媒体类型 总结

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

  2. CSS：CSS 媒体类型

    ylbtech-CSS:CSS 媒体类型 1.返回顶部 1. CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体类型 ...

  3. css媒体类型

    all 用于所有的媒体设备. aural 用于语音和音频合成器. braille 用于盲人用点字法触觉回馈设备. embossed 用于分页的盲人用点字法打印机. handheld 用于小的手持的设备 ...

  4. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  5. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

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

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

  7. Media Queries——媒体类型

    媒体类型(Media Type)在CSS2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式. 在CSS2中常碰到的就是all(全部).screen(屏幕).pri ...

  8. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  9. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

随机推荐

  1. 盘点:七大.NET著名开源项目

    尽管过了相当长的时间,花费了不少资源,微软和.NET社区还是在最近几年加入到了开源运动的阵营中来了,这令人相当惊讶,因为两大阵营一直都是经常对立的.然而,事实是依靠开源,微软社区中的开源开发工具日益发 ...

  2. Oracle 查询表信息（字段+备注） .

    var t=   CardService.GetInstance().test("900000000233");          foreach (DataRow row in ...

  3. 【BZOJ4254】Aerial Tramway 树形DP

    [BZOJ4254]Aerial Tramway 题意:给你一座山上n点的坐标,让你在山里建m条缆车,要求缆车两端的高度必须相等,且中间经过的点的高度都小于缆车的高度.并且不能存在一个点位于至少k条缆 ...

  4. Android 通过findViewById方式创建TabHost

    package org.shuxiang.tabhostsample; import android.os.Bundle; import android.app.ActivityGroup; impo ...

  5. [Domino]执行命令load design的时候出现Warning: Cannot locate design template

    发现问题 在做Pseudo Test的时候被QA测出了一个问题.在Domino concole打命令“load design”,被Workbench翻译过后的数据库提示了一个警告:Warning: C ...

  6. Maven的使用入门

    0.什么是maven? 它是一个软件开发管理工具,主要管理工作是:依赖管理,项目一键构建 1.我们为什么要使用maven? 使用maven构建的项目不包含jar包文件,所以整个项目的体积非常小 mav ...

  7. Action请求流程分析

    Strut2流程分析-----从请求到Action方法() 首先请求会调用strutsPrepareAndExcuteFliter----(这个就是我们在web.xml文件中所配置的那个拦截器吧,所有 ...

  8. poj1015 Jury Compromise【背包】

    Jury Compromise Time Limit: 1000MS   Memory Limit: 65536K Total Submissions:32355   Accepted:8722   ...

  9. 启动windows服务的bat文件编写格式

    1.bat文件需要和bin文件内容放在一起 启动服务的bat文件如下: sc create 邮件服务 binPath= "%~dp0可执行文件名称.exe" start= auto ...

  10. SignalR 循序渐进（四） Hub的生命周期以及IoC

    有阵子没更新这个系列了,最近太忙了.本篇带来的是Hub的生命周期以及IoC. 首先,Hub的生命周期,我们用一个Demo来看看: public class TestHub : Hub { public ...