响应式页面之秘籍

响应式web设计之 @media screen

两种写法：

一种：是直接在link中判断设备的尺寸，然后引用不同的css文件：

        < link rel = "stylesheet" type = "text/css" href = "styleA.css" media = "screen and (min- 400px)" >

        意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

        

      在media属性里

           screen   是媒体类型里的一种，CSS2.1定义了10种媒体类型

           and   被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

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

      

     < link rel = "stylesheet" type = "text/css" href = "styleB.css"  media = "screen and (min- 600px) and (max- 800px)" >

      意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种： 即是直接写在＜style＞标签里：     

     @media screen and (max- 600px) {

　　　　/*你的样式*/

        .class {

         background: #fff;

       }

   }

写法是前面加@media ，其它跟link里的media属性相同。

 

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

     @media screen and (max- 600px) {

　　　　/*你的样式*/

        .class {

         background: #fff;

       }

   }

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

     @media screen and (min- 900px) {

　　　　/*你的样式*/

        .class {

         background: #fff;

       }

   }

Multiple Media Queries

你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

     @media screen and (min- 900px) and (max- 600px){

　　　　/*你的样式*/

        .class {

         background: #fff;

       }

 

 

补充：media query中的not only all等关键字

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到
还有其它一些：

media_type	设备类型说明
all	所有设备
aural	听觉设备
braille	点字触觉设备
handled	便携设备，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端等设备
tv	电视机等设备类型
embossed	盲文打印机

1.  @media screen and (max- 300px) {}         

    屏幕宽度小于300px时的样式；

2.  @media screen and(min-300px){}    


    屏幕宽度大于300px时的样式；

3.  @media screen and(min-600px) and (max-800px){};

    屏幕宽度大于600px小于800px时的样式；

 

兼容IE浏览器的css hack:

仅IE6和IE7识别

@media screen9 {   .selector {  property: value; } }  

仅IE6和IE7、IE8识别

@media screen\,screen9 {   .selector {  property: value; } } 

仅IE8识别

@media screen {   .selector {  property: value; } } 

仅IE8-10识别

@media screen {   .selector {  property: value; } }  

仅IE9和IE10识别

@media screen and (min-0) {   .selector {  property: value; } }