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 ...
随机推荐
- 安装Docker
安装Docker 1. 增加Repository配置文件 cat >/etc/yum.repos.d/docker.repo <<-EOF [dockerrepo]name=Dock ...
- ios正在使用NSDateComponents、NSDate、NSCalendar它的结论是在当前时间是在一段时间在一天。
一般应用程序设置这一组的存在,比如夜间模式,如果你.从8:00-23:00.在这个当前的时间是如何推断出期间.主要的困难在于如何使用NSDate生成8:00时间和23:00时间.然后用当前时间,也许有 ...
- ABP领域层——领域事件(Domain events)
ABP领域层——领域事件(Domain events) 基于DDD的现代ASP.NET开发框架--ABP系列之14.ABP领域层——领域事件(Domain events) ABP是“ASP.NET B ...
- Visual Studio 2010/2013 查看DLL接口(函数)
1. “应用程序" Visual Studio 2010/2013 的Visual Studio Tools文件夹中打开Visual Studio Command Prompt 命令提示窗口 ...
- 乐视TV2015校园招聘A第二个大的发行量(of中国Academy科学大学站)
标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数字.但是一些数字多次出现.有些数字不出现.请设计算法和程序,统计数据不会出现什么.什么号码多次出现.在O(n)时间复杂度,O(1)在完成它的空间复杂 ...
- 内置在虚拟机上64位操作系统:该主机支持 Intel VT-x,但 Intel VT-x 残
VT-Virtual Technology. 在这里特别说一下:虚拟64位操作系统,须要特别在BIOS中打开VT支持.怎样提示:此主机不支持Intel VT-x,则不可能虚拟出64位系统. 当提示:此 ...
- Swift语言指南(一)--语言基础之常量和变量
原文:Swift语言指南(一)--语言基础之常量和变量 Swift 是开发 iOS 及 OS X 应用的一门新编程语言,然而,它的开发体验与 C 或 Objective-C 有很多相似之处. Swif ...
- 破解Kaleidoscope-2.1.0-134,无限试用
找到超时时间计算的地方,有非常多处,大概几十外,大约类似下面的代码,作者应该是copy了非常多份反复的代码, 10000C592 F2 0F 10 8D 40 FE FF FF ...
- FPGA 异步时钟处理方
1 假设FPGA设计,包括不同的频率的时钟,它会发出涉及异步时钟. 我们需要一些方法来使时钟同步,从而保证FPGA可靠性设计. 2 在建立和保持时间所构成的有效时间窗体内,数据输入到触发器进行转换. ...
- 直读Innodb datafile
这两天有空翻了翻大神写的<innodb存储引擎>,手痒亲身实践.由于此书出版了有段时日,没有用其推荐的python工具,通过点滴推敲,略微发现其中冰山一角的奥秘.对于今后对于一些问题查证或 ...