【媒体类型 & 媒体查询】

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

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

  1. <html>
  2. <head>
  3. <style>
  4. @media screen
  5. {
  6.     p.test {font-family:verdana,sans-serif;font-size:14px;}
  7. }
  8. @media print
  9. {
  10.     p.test {font-family:times,serif;font-size:10px;}
  11. }
  12. @media screen,print
  13. {
  14.     p.test {font-weight:bold;}
  15. }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. ....
  21. </body>
  22. </html>

　　

　　

　　

　　如果文档宽度小于 300 像素则修改背景演示(background-color):

  1. @media screen and (max-width: 300px) {
  2.     body {
  3.         background-color:lightblue;
  4.     }
  5. }

参考：

1、http://www.runoob.com/css/css-mediatypes.html

2、http://www.runoob.com/cssref/css3-pr-mediaquery.html

媒体类型 & 媒体查询的更多相关文章

  1. CSS 媒体类型

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

  2. CSS 媒体类型 总结

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

  3. CSS：CSS 媒体类型

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

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

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

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

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

  6. Web API 入门 二 媒体类型

    还是拿上面 那篇 Web API 入门 一  的那个来讲 在product类中加一个时间属性

  7. HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)

    HTTP请求415错误 – 不支持的媒体类型(Unsupported media type) 通常有以下情况: 1:检查你的 http 请求头信息,比如 因为 User-Agent 被服务器设置 拒绝 ...

  8. Media Queries——媒体类型

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

  9. [日常] HTTP的媒体类型

    HTTP的媒体类型 1.MIME类型的数据格式标签(MultIpurpose Internet Mail Extension) 2.最初用于电子邮件系统之间搬移,多用途互联网邮件扩展 3.MIME类型 ...

随机推荐

  1. jdbc（MySQL）

    1.连接数据库 2.使用配置文件 3.启用连接池 4.事务 JDBC WHAT? 用于执行 SQL 语句的 Java API WHY? 不需要了解每一种数据库连接操作方式 HOW? 加载驱动.获取连接 ...

  2. django---单表操作之展示书籍列表

    下面使用python console对数据库进行增删改查 下面我们来举个例子在页面上展示记录 结果: 注意html里面变量的写法 {% for book in book_list %} <tr& ...

  3. web session 原理1

     原理 我们都知道,浏览器无状态的.浏览器是操作不了session的,浏览器能够做的只是传递cookie,每次都传递. 把当前主机下的,和当前请求相同域下的cookie 传递到服务器去,只要cooki ...

  4. Mybatis学习4——一对一关联查询方法2------实体作为属性

    实体order和user采用resultMap order package pojo; import java.util.Date; public class Order { private Inte ...

  5. mapPartitions

    mapPartitions操作与 map类似,只不过映射的参数由RDD中的每一个元素变成了RDD中每一个分区的迭代器,如果映射过程需要频繁创建额外的对象,使用mapPartitions操作要比map操 ...

  6. 《锋利的JQuery》中的动画效果：

    说实话,虽然这本书已经很老了,老到什么程度呢,这本书以JQuery1.9以前的版本写就的,toggle()方法的(func1,func2,...)这个切换事件的功能已经被删去了 但是这本书还是挺8错的 ...

  7. 白鹭引擎 - 本地坐标和舞台坐标的转化 ( globalToLocal, localToGlobal )

    class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 ...

  8. new date() 计算本周周一日期

    new date() 计算本周周一日期 需求:计算某天的那一周周一的日期 1.new Date() date.getDay(); //获取周几 0-6 date.getTime();//获取时间戳 1 ...

  9. [记录] Mysql 复制表格结构

    有时候我们需要原封不动的复制一张表的表结构来生成一张新表,MYSQL提供了两种便捷的方法 一.LIKE方法 like方法能一模一样的将一个表的结果复制生成一个新表,包括复制表的备注.索引.主键外键.存 ...

  10. 浅析STM32之usbh_def.H

    [温故而知新]类似文章浅析USB HID ReportDesc (HID报告描述符) 现在将en.stm32cubef1\STM32Cube_FW_F1_V1.4.0\Middlewares\ST\S ...