【媒体类型 & 媒体查询】

　　@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. python3.5安装Numpy、mayploylib、opencv等额外库

    安装Python很简单,但是安装额外的扩展库就好麻烦,没有了第三方库的Python就是一个鸡肋~~  我们现在安装NumPy库 1. 首先这里假设你已经安装了Python了,不会的去看我的另一篇博文( ...

  2. （一）apache atlas源代码编译与打包

    特别注意: atlas已经提供了0.8版本可以安装了,只有在国外的服务器上安装编译才比较顺利,可以按照官方文档去安装. 国内很多网址有被墙的问题,目前还没有完全解决,可能安装不成功 安装文档地址:ht ...

  3. cnblogs博客申请完毕，以后再这里安家落户

    cnblogs博客申请完毕,以后再这里安家落户,之前的博客就不转载了,好好搞技术,安稳过日子.

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

  5. Android中糟糕的AsyncTask

    上周做一个Android中的帧动画,因为每帧图片都比较大,所以采用每次读取一帧,延时再读取下一帧的方式实现.在读取的时候,采用AsyncTask,去设置ImageView的背景.但是发现需要切换帧动画 ...

  6. day16-小数据池

    一,什么是代码块 Python程序是由代码块构造的.块是一个python程序的文本,他是作为一个单元执行的. 代码块:一个模块,一个函数,一个类,一个文件等都是一个代码块. 而作为交互方式输入的每个命 ...

  7. 常用jqueryPlugin

    http://www.jq22.com editable-select :  jQuery可编辑可下拉插件jquery.editable-select.js

  8. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  9. Firebird日期时间操作

    最近在使用Firebird数据做 一项目,使用FireBird边用边学.(以下转贴) 查询2007年度以后的,12月份以上的数据记录,datetime为timestamp字段 select * fro ...

  10. Linux 多进程实现方法

    1.需求 查找192.168.0.*网段中所有未使用过的IP 2.实现     我们知道查找未使用IP的方法可以使用ping命令完成.对于单个IP的判断,使用命令如下 $ 192.168.0.1 PI ...