css2的@media

css2里面尽管支持@media属性。可是能实现的功能比較少,一般仅仅用做打印的时候做特殊定义的CSS。

语法: @media sMedia { sRules }

说明:

sMedia :  指定设备名称。请參阅附录:设备类型

sRules :  样式表定义

指定样式表规则用于指定的设备类型。请參阅link对象的media属性(特性)。

演示样例:

1
2
3
4
5
6
7
8
9
// 设置显示器用字体尺寸
@media screen{
BODY {font-size:12pt;
}
}
// 设置打印机用字体尺寸
@media print{
@import "print.css"
BODY {font-size:8pt;}
}

css3的@media

@media 属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面。能够用查询语句来匹配各种类型的屏幕。

语法:@media : { sRules }

取值:

1
2
<sMedia>:指定设备名称。
{sRules}:样式表定义。

说明:

推断媒介(对象)类型来实现不同的展现。此特性让CSS能够更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).

01
02
03
04
05
06
07
08
09
10
11
12
13
media_query: [only | not]?  [ and  ]*
expression: (  [: ]? )
media_type: allauralbraillehandheldprintprojectionscreenttytvembossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

解析

media_query
:媒体查询条件。包含了 only not and 这些常常在程序里面出现的逻辑推断。

expression:表达式。媒体特征的匹配与否。

media_type:媒体的种类。

包含了非常多。

media_feature:媒体的特征。经常使用的是 min-width max-width 最小最大宽度的推断。

DEMO(推荐在Chrome或者FIREFOX下打开。打开后,按快捷键“CTRL”+”+”,“CTRL”+”-”来缩放页面):

CSS代码

1
2
3
4
5
body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间
蓝色*/
@media screenand (max-width:500px){body{background:green;}}/*宽度小于500px时
绿色*/
@media screenand (min-width:800px){body{background:red;}}/*宽度大于800px时
红色*/
@media screenand (max-height:100px){body{background:yellow;}}/*高度小于100px时
黄色*/
@media screenand (min-height:400px){body{background:pink;}}/*高度大于400px时
粉色*/

HTML代码

1
2
3
4
5
6
<p>效果演示,请缩小/扩大浏览器的窗体大小注意背景色的变化。逻辑例如以下:</p>
<p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p>
<p>/*宽度小于500px时 绿色*/</p>
<p>/*宽度大于800px时 红色*/</p>
<p>/*高度小于100px时 黄色*/</p>
<p>/*身高大于400px时间 粉红色*/</p>

css @media认识的更多相关文章

  1. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  2. CSS media queries

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  3. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  4. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  5. Web之CSS开发技巧: CSS @media

    CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...

  6. 一些实用的CSS Media Query代码片段,个人采集

    CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...

  7. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  8. css:Media Queries: How to target desktop, tablet and mobile?

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

  9. mobile adaptor & css media query

    mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...

  10. CSS Media Query

    [CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...

随机推荐

  1. krpano漫游加方向性3D声音(这篇文章已被移到krpano中国网站 krpano360.com)

    需求:      在场景转换视角时.会出现不同方位的声音以及对应的音量变化,也即是将声音视作hotspot.当视角转到该声音热点时,也随之听到声音.官方样例:点击打开链接 本文已经搬迁到下述网址.请点 ...

  2. ZOJ-3652-Maze(BFS)

    Celica is a brave person and believer of a God in the bright side. He always fights against the mons ...

  3. 安卓开发笔记——探索EventBus(转)

    1.关于EventBus: 组件通讯在Android开发中是不可避免的,随着业务需求的复杂化,代码中需要我们去处理的业务逻辑难度也不断增大.例如多个Fragment之间的数据传递,Service与Ac ...

  4. Android在第三方应用程序系统应用尽早开始,杀死自己主动的第三方应用程序,以重新启动

    1.为什么第三方应用程序可能早于System的app启动? Android能够查阅了,这里就不细述了,这里不阐述ROM启动还有bootloader.软件启动的大致流程应该是 启动kernel 执行se ...

  5. JavaScript循环之for/in循环

    今天学到了JavaScript的语句篇.同其他常见编程语言如C.Java等一样,JavaScript中的语句包含:①表达式语句②复合语句和空语句③声明语句④条件语句⑤循环语句⑥跳转语句,当然JavaS ...

  6. ubunut 查看port被哪个程序占用

    查看8087port被哪个程序占用 lsof -i :8087 -n

  7. 一位OWin服务器新成员TinyFox

    一位OWin服务器新成员TinyFox TinyFox 是一款支持OWIN标准的WEB应用的高性能的HTTP服务器,是Jexus Web Server的"姊妹篇".TinyFox本 ...

  8. BST(Binary Search Tree)

    原文链接:http://blog.csdn.net/jarily/article/details/8679280 /****************************************** ...

  9. View Component

    View Component 在之前的MVC中,我们经常需要类似一种小部件的功能,通常我们都是使用Partial View来实现,因为MVC中没有类似Web Forms中的WebControl的功能. ...

  10. js中,(function(){})()的用法解析

    (function($){...})(jQuery)  含义 经常用,今天总结一下,下文摘自某网友的总结: (function($){...})(jQuery)实际上是匿名函数,不懂得朋友可以继续往下 ...