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. 终结者:具体解释Nginx(一)

            相信非常多人都听过Nginx.这个小巧的东西能够和Apache及IIS相媲美. 那么它有什么作用呢?一句话.它是一个减轻Web应用server(如Tomcat)压力和实现Web应用se ...

  2. Qt原始资源形象问题后删除

        这些天Qt请项目超市收银系统,作为练一练手,无论如何,亦休闲亦无关,做几乎同样的.旨在取代以前的资源图片, 是什么改变了,码里面的路径都改了.还是编译只是去,总是提示这样一个错误. <s ...

  3. 浅谈SQL注入风险 - 一个Login拿下Server(转)

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  4. POJ 1743 Musical Theme Hash+二分法

    标题效果:有一个美丽的旋律,它们是由一些不大于88音调.如果计为五个音调的量度,问:是否有相同的节奏的多个部分(相同的差,以及两者之间的相同的节奏不能重叠),并寻求最长长度. 思考:这个问题是八人中的 ...

  5. Error creating bean with name &#39;com.you.user.dao.StudentDaoTest&#39;: Injection of autowired dependencies

    1.错误叙述性说明 七月 13, 2014 6:37:41 下午 org.springframework.beans.factory.xml.XmlBeanDefinitionReader loadB ...

  6. MySQL 架构

    原文:MySQL 架构 MySQL架构和结构分析 官方架构图: MySQL DB 各模块架构图如下: MySQL安装方式 MySQL初始化 简介:什么是事务: 事务: ACID :  事务确保了银行不 ...

  7. 毕业后的第二份工作:进入国外 在新加坡工作 每月一次18K

    --訪传智播客成都校区12.26就业班学员 杨洋 姓名:杨洋 毕业院校:重庆科技学院 专业:电子信息技术与project 就职公司:新电科技 岗位:Javaproject师 月薪:18K 上午.他刚去 ...

  8. cocos2d-x3.x 设计与实现弹出对话框

    要定义一个类PopupLayer 代码PopupLayer.h #ifndef __crossDT_PopupLayer__ #define __crossDT_PopupLayer__ #inclu ...

  9. jsmart 前结合案例

    前绑定jsmart这是一个不错的选择.之前通过经常使用的项目中的.最近涉及的领域的后端部.jsmart有些使用相对较少,主要是因为他想引用文件,我写的模板,在一个简单的项目,直接使用js界,很复杂的前 ...

  10. hdu Write a simple HTML Browser

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1088 对比输出 代码: #include <stdio.h> #include <s ...