幽灵资源网 Design By www.bzswh.com
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。
一、CSS2 中的@media
css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。
@media sMedia { sRules }
1.1、示例
// 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } } // 设置打印机用字体尺寸 @media print { @import "print.css" BODY {font-size:8pt;} }
二、CSS3 中的@media
@media 属性在CSS3里面已经演变成一种 media queries
(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
语法:
@media mediatype and|not|only (media feature) { CSS-sRules; }
- mediatype 媒体类型:all,print(打印机)、screen(电脑屏幕、手机等)、speech(屏幕阅读器等设备)
- media_query and | not | only 媒体查询条件运算
- media_feature 媒体特征,如最大宽度和最小宽度。
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型。
2.1、示例
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时 粉色*/
2.2、媒体特性
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...