CSS3 media queries

响应式页面布局的引用media queries判断设备尺寸规格后的基本使用方法:

1.通过link引入文件式

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> //屏幕大于400px时应用styleA.css文件
<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)"> //屏幕大于600px小于800px时应用styleB.css文件

screen是媒体类型,css2.1定义了10种媒体类型

and是关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)

(min-width: 400px) 就是媒体特性,其被放置在一对圆括号中

2.通过内嵌式

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {...
  }
}

写法即前面加@media,其它跟link里的media属性一致

3.IE部分的兼容性

调用css3-mediaqueries.js文件,来帮助IE8或是之前的版本支持CSS3 media queries:

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
posted @ 2013-09-02 17:16  Joerias  阅读(304)  评论(0编辑  收藏  举报