【媒体类型 & 媒体查询】

　　@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. 修改json文件

    第三方库jq https://stedolan.github.io/jq/manual/ cat old_deploy.json \ | jq --arg cpu_limit $cpu_limit ' ...

  2. idea 控制台行数限制

    在本地进行测试时,会出现报错太多idea控制台被限制打印出来的日志被清楚的现象: idea改变控制台打印log限制的方法: 1. 点击 File ->Settings ->editor - ...

  3. iOS基础知识之属性及属性关键字

    iOS属性及属性关键字 一.属性功能:1.给现有的成员变量生成一对setter/getter方法.2.如果没有声明成员变量,自动声明一个_属性名的私有变量(默认的成员变量是受保护的). 二.属性关键字 ...

  4. day02-数据库操作

    一.数据库操作 1.1.创建数据库(增) CREATE DATABASE 也可以使用小写,(注意不要漏掉分号 ;) mysql> create database test; 或 mysql> ...

  5. JAVA 原子操作类

    上文中,guava代码中就用到了,在这里再专门捋一下 部分内容源自: https://www.jianshu.com/p/712681f5aecd https://www.yiibai.com/jav ...

  6. join和子查询的一点点思考

    代码和表设计过程中,为了考虑数据库的范式,通常导致需要join多张表或子查询, 如报表场景, 可此种方式在大数据量的 情况下,效率较低.  如果能做适量的数据冗余,便可以减少join或子查询,效率较高 ...

  7. 用waitpid函数回收进程

    waitpid函数:作用同wait,但可指定pid进程清理,可以不阻塞. 原型:pid_t waitpid(pid_t pid, int *status, in options); 返回值:成功时返回 ...

  8. XAMPP+composer+laravel+thinkphp5那些深情的往事

    xampp 依赖库 https://www.microsoft.com/zh-CN/download/details.aspx?id=29 下载地址 https://www.apachefriends ...

  9. 跨域（六）——window.name

    window.name也可以进行跨域数据传输. 下面是相应的代码,evil.html跨域读取foo.html的数据,其中proxy.html和evil.html同域,没有任何内容. evil.html ...

  10. 一种去中心化的manager设计思路

    通常,我们设计游戏引擎时,或者管理器时,都会由管理器产出各种产品,一旦有新产品要加,就要修改管理器,来增加相应的生成代码. 这从设计上来看有两个问题: 1,管理器参数需要有个类型,在管理器中用if e ...