【媒体类型 & 媒体查询】

　　@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. 关于微信支付接口,curl错误代码58

    微信支付接口,curl错误代码58 之前的微信付款到用户零钱都是好好的,今天运营来找我, 我想了了下,就是进行了网站搬家 看了下 微信支付相关的证书配置文件 知道了,在这个 要改下证书的路径 WxPa ...

  2. 36纯 CSS 动画原理，在页面上表现日蚀现象

    原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...

  3. Yii Framework隐藏index.php文件的步骤

    Yii Framework隐藏index.php文件的步骤 作者:feebas 发布于:2012-4-23 13:36 Monday 分类:Yii Framework 1.开启apache的mod_r ...

  4. 函数getpass

    函数getpass为python自带函数,作用是使用户输入的内容不可见 1 # -*- coding:utf-8 -*- 2 import getpass 3 a = raw_input(" ...

  5. MongoTemplate的使用

    参考:  https://www.cnblogs.com/ityouknow/p/6828919.html

  6. C++Builder debug 程序的时候 structure required

    C++Builder debug 程序的时候, deub一个变量 dm->avar; E2288 Pointer to structure required on left side of -& ...

  7. Spring boot 自定义starter

    以下配置来自尚硅谷.. 常用如何配置 @Configuration //指定这个类是一个配置类 @ConditionalOnXXX //在指定条件成立的情况下自动配置类生效 @AutoConfigur ...

  8. python 阿狸的进阶之路(9)

    tcp传输: 传输需要ack回应,然后才清空缓存,服务端先起来. tcp流式协议,tcp的Nagle的优化算法,会将时间间隔短,数据量小的打包成一个,然后发送给对方,减少发送的次数. UDP协议: 不 ...

  9. xampp默认mysql数据库root密码的修改

    因为安装xampp后的mysql默认用户root的密码为空,而比如部署Testlink时需要提供数据库密码,此时就需要给root设定密码(网上有些方法,大同小异,但是可能都未标明关键点,未一些出上手的 ...

  10. Django - cookies 会话跟踪技术

    一.HTTP协议的无状态保存 两次请求之间没有关联 会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应 2.会话路径技术使用Cookie或session完成 我们知道HTTP ...