【媒体类型 & 媒体查询】

　　@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. Java SPI机制简介

    SPI 简介 SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制. 目前有不少框架用它来做服务的扩展发现, 简单来说,它就是一种动态替换发现 ...

  2. for循环、in、not in

    for循环可以遍历集合中任意一个元素 1 a = ["hello", "world", "dlrb"] 2 for b in a: 3 pr ...

  3. sqlserver数据库授权操作

    https://www.jb51.net/article/126432.htm 系统需求简介 最近一直在做高校云平台这个项目,我们小组做的是其中的一个子系统是成绩管理系统,不同于之前的开发方式,本次我 ...

  4. MySQL 中 mysqld_safe 与 mysqld 区别，以及 mysqld_safe 的使用介绍

    [mysqld_safe 与 mysqld 区别] 直接运行mysqld程序来启动MySQL服务的方法很少见 mysqld_safe脚本会在启动MySQL服务器后继续监控其运行情况,并在其死机时重新启 ...

  5. ASPxCallback组件(珍藏版)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs ...

  6. 【JEECG技术文档】JEECG高级查询构造器使用说明

    功能介绍   高级查询构造器支持主子表联合查询,查询出更精确的数据. 要使用高级查询构造器需要完成以下步骤: 1. 在高级查询管理配置主子表信息. 2. 配置完后在JSP页面DataGrid标签上添加 ...

  7. Directshow 采集与FFDshow 冲突

    在使用Directshow 进行视频采集的时候,发现与本地安装的一个ffdshow有冲突. 见下图: 经过测试发现dshow 在设置采集媒体类型的时候,如果设置RGB32就会崩溃,如果设置RGB24就 ...

  8. Python 基础补充（一） 列表、元组、集合、字典的区别和相互转换

    一.列表.元组.集合.字典的区别   列表 元组 集合 字典 英文 list tuple set dict 可否读写 读写 只读 读写 读写 可否重复 是 是 否 是 存储方式 值 值 键(不能重复) ...

  9. 2018SDIBT_国庆个人第三场

    A - A CodeForces - 1042A There are nn benches in the Berland Central park. It is known that aiai peo ...

  10. win10 任务栏锁定，win键没反应

    现象:之前用win10,换成win10专业版后,安装360优化系统,过了几天后突然发现任务栏好像被锁定一般,按windows键没有任何反应,任务栏打开的文件,图片等等右键也没有反应,讲道理应该有关闭选 ...