用CSS3的 media属性根据屏幕大小做自适应各种分辨率网页显示版本-media query详解

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。比如说我们熟悉的wordpress后台,当屏幕分辨率小于900px的时候,左边的侧栏就会变成收拢状态(@media only screen and (max-width:900px))。

这样的好处:让顾客得到最佳的网页视图;但是依然存在坏处:比如我自己的习惯喜欢在手机上查某些资料,某些网页用手机打开自适应后导致我要找的资料被隐藏了,比较烦躁。结论:请善用这种技术,比如前面wordpress后台的例子,收拢状态的侧栏,依然可以被点击后展开,这就是一个完美的例子。

不管怎么样,作为网站前端开发人员需要知道并且会用这种知识。这篇文章让我们揭开 css 里面 @media 属性的神秘面纱,学习一下是如何实现的。

css2里面的@media

@media 属性在CSS2里面已经存在,参见CSS2在线手册-有爱一街版:@media sMedia { sRules } 属性详解,在这个说明页面我们可以看到在css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。

语法: @media  sMedia { sRules }说明: sMedia :  指定设备名称。请参阅附录:设备类型sRules :  样式表定义指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。示例:// 设置显示器用字体尺寸@media screen {BODY {font-size:12pt; }}// 设置打印机用字体尺寸@media print {@import "print.css"BODY {font-size:8pt;}}

css3里面的@media

@media 属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,参见CSS3在线手册-有爱一街版:media queries 详解,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。

语法:@media :<sMedia> { sRules }取值:<sMedia>:指定设备名称。请参阅附录:设备类型{sRules}:样式表定义。说明:判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).media_query: [only | not]? <media_type> [ and <expression> ]*expression: ( <media_feature> [: <value>]? )media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossedmedia_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

其中核心的css代码如下:

<style type="text/css">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时 粉色*/</style>

从上面的实例可以看出,要小于的时候用max,要大于的时候用min,逻辑是正好相反的,大家注意一下。

扩展总结

有了媒体匹配查询的CSS3功能之后,你就可以在一个页面上定义多套显示风格了,非常好用方便。

但是低级版本的IE不支持怎么办?谁去管它呢?你有默认的一套风格都支持就好了啊,一般手机上的浏览器都是webkit的内核,这些东西都是兼容的。所以这么好用的一个属性,大家都喜欢用。

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
这里写图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值