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. 安装Docker

    安装Docker 1. 增加Repository配置文件 cat >/etc/yum.repos.d/docker.repo <<-EOF [dockerrepo]name=Dock ...

  2. ios正在使用NSDateComponents、NSDate、NSCalendar它的结论是在当前时间是在一段时间在一天。

    一般应用程序设置这一组的存在,比如夜间模式,如果你.从8:00-23:00.在这个当前的时间是如何推断出期间.主要的困难在于如何使用NSDate生成8:00时间和23:00时间.然后用当前时间,也许有 ...

  3. ABP领域层——领域事件(Domain events)

    ABP领域层——领域事件(Domain events) 基于DDD的现代ASP.NET开发框架--ABP系列之14.ABP领域层——领域事件(Domain events) ABP是“ASP.NET B ...

  4. Visual Studio 2010/2013 查看DLL接口(函数)

    1. “应用程序" Visual Studio 2010/2013 的Visual Studio Tools文件夹中打开Visual Studio Command Prompt 命令提示窗口 ...

  5. 乐视TV2015校园招聘A第二个大的发行量(of中国Academy科学大学站)

    标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数字.但是一些数字多次出现.有些数字不出现.请设计算法和程序,统计数据不会出现什么.什么号码多次出现.在O(n)时间复杂度,O(1)在完成它的空间复杂 ...

  6. 内置在虚拟机上64位操作系统:该主机支持 Intel VT-x,但 Intel VT-x 残

    VT-Virtual Technology. 在这里特别说一下:虚拟64位操作系统,须要特别在BIOS中打开VT支持.怎样提示:此主机不支持Intel VT-x,则不可能虚拟出64位系统. 当提示:此 ...

  7. Swift语言指南(一)--语言基础之常量和变量

    原文:Swift语言指南(一)--语言基础之常量和变量 Swift 是开发 iOS 及 OS X 应用的一门新编程语言,然而,它的开发体验与 C 或 Objective-C 有很多相似之处. Swif ...

  8. 破解Kaleidoscope-2.1.0-134,无限试用

    找到超时时间计算的地方,有非常多处,大概几十外,大约类似下面的代码,作者应该是copy了非常多份反复的代码, 10000C592 F2 0F 10 8D 40 FE FF FF             ...

  9. FPGA 异步时钟处理方

    1 假设FPGA设计,包括不同的频率的时钟,它会发出涉及异步时钟. 我们需要一些方法来使时钟同步,从而保证FPGA可靠性设计. 2 在建立和保持时间所构成的有效时间窗体内,数据输入到触发器进行转换. ...

  10. 直读Innodb datafile

    这两天有空翻了翻大神写的<innodb存储引擎>,手痒亲身实践.由于此书出版了有段时日,没有用其推荐的python工具,通过点滴推敲,略微发现其中冰山一角的奥秘.对于今后对于一些问题查证或 ...