【媒体类型 & 媒体查询】

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

　　

　　

　　

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

@media screen and (max-width: 300px) {

    body {

        background-color:lightblue;

    }

}

参考：

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. 20165205 2017-2018-2 《Java程序设计》第七周学习总结

    20165205 2017-2018-2 <Java程序设计>第七周学习总结 教材学习内容总结 下载XAMPP并完成配置 完成XAMPP与数据库的连接 学会创建一个数据库 学会用java语 ...

  2. redis 主从配置和集群配置

    主从配置 |  集群配置 redis主从 主从配置原因: 1.到达读写分离,读的操作和写操作比例10 : 1读数据频繁,写数据次数少,这样可以配置1个master数据库用来写数据,配置多个slave从 ...

  3. Java-左移右移-jdk8

    移位有三种 << 左移,左边补0 >> 右移,正数左边补0,负数补1 >>> 右移, 正数,负数统一左边补0 来看几个奇葩的代码 public static ...

  4. JAVA给图片添加水印

    package com.test; import org.junit.Test; import javax.imageio.ImageIO; import java.awt.*; import jav ...

  5. 代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转）

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...

  6. 54.纯 CSS 创作一副国际象棋

    原文地址:https://segmentfault.com/a/1190000015310484 感想:棋盘是 CSS 画的,棋子是 unicode 字符. HTML code: <html&g ...

  7. SD-WAN供应商列表

    SD-WAN的一个重要思想是,可以使用任何类型的多个物理WAN链路来承载流量,而无需网络工程师进行大量工程设计.相反,SD-WAN解决方案在物理基础设施之上运行覆盖(隧道),抽象出实际链接. SD-W ...

  8. git 常用操作总结

    廖雪峰博客的git 教程写得不错, 很详细,但是却总结的不是很好. 这里哥再详细总结一遍吧! Git鼓励大量使用分支: 查看分支:git branch 创建分支:git branch 切换分支:git ...

  9. spark partition 理解 / coalesce 与 repartition的区别

    一.spark 分区 partition的理解: spark中是以vcore级别调度task的. 如果读取的是hdfs,那么有多少个block,就有多少个partition 举例来说:sparksql ...

  10. 2. 修改jsp需要重启tomcat的问题