css @media认识
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: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed 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 screen and ( max-width : 500px ){body{ background : green ;}} /*宽度小于500px时 @media screen and ( min-width : 800px ){body{ background : red ;}} /*宽度大于800px时 @media screen and ( max-height : 100px ){body{ background :yellow;}} /*高度小于100px时 @media screen and ( 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认识的更多相关文章
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- [CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
- Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...
- 一些实用的CSS Media Query代码片段,个人采集
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- css:Media Queries: How to target desktop, tablet and mobile?
<!doctype html> <html> <head> <meta name="viewport" content="wid ...
- mobile adaptor & css media query
mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...
- CSS Media Query
[CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...
随机推荐
- 终结者:具体解释Nginx(一)
相信非常多人都听过Nginx.这个小巧的东西能够和Apache及IIS相媲美. 那么它有什么作用呢?一句话.它是一个减轻Web应用server(如Tomcat)压力和实现Web应用se ...
- Qt原始资源形象问题后删除
这些天Qt请项目超市收银系统,作为练一练手,无论如何,亦休闲亦无关,做几乎同样的.旨在取代以前的资源图片, 是什么改变了,码里面的路径都改了.还是编译只是去,总是提示这样一个错误. <s ...
- 浅谈SQL注入风险 - 一个Login拿下Server(转)
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
- POJ 1743 Musical Theme Hash+二分法
标题效果:有一个美丽的旋律,它们是由一些不大于88音调.如果计为五个音调的量度,问:是否有相同的节奏的多个部分(相同的差,以及两者之间的相同的节奏不能重叠),并寻求最长长度. 思考:这个问题是八人中的 ...
- Error creating bean with name 'com.you.user.dao.StudentDaoTest': Injection of autowired dependencies
1.错误叙述性说明 七月 13, 2014 6:37:41 下午 org.springframework.beans.factory.xml.XmlBeanDefinitionReader loadB ...
- MySQL 架构
原文:MySQL 架构 MySQL架构和结构分析 官方架构图: MySQL DB 各模块架构图如下: MySQL安装方式 MySQL初始化 简介:什么是事务: 事务: ACID : 事务确保了银行不 ...
- 毕业后的第二份工作:进入国外 在新加坡工作 每月一次18K
--訪传智播客成都校区12.26就业班学员 杨洋 姓名:杨洋 毕业院校:重庆科技学院 专业:电子信息技术与project 就职公司:新电科技 岗位:Javaproject师 月薪:18K 上午.他刚去 ...
- cocos2d-x3.x 设计与实现弹出对话框
要定义一个类PopupLayer 代码PopupLayer.h #ifndef __crossDT_PopupLayer__ #define __crossDT_PopupLayer__ #inclu ...
- jsmart 前结合案例
前绑定jsmart这是一个不错的选择.之前通过经常使用的项目中的.最近涉及的领域的后端部.jsmart有些使用相对较少,主要是因为他想引用文件,我写的模板,在一个简单的项目,直接使用js界,很复杂的前 ...
- hdu Write a simple HTML Browser
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1088 对比输出 代码: #include <stdio.h> #include <s ...