media type和media query

media type

media type是CSS2的重要属性，通过它，可以针对不同的设备指定不同的样式。

 

media type种类：

 

用法：

1. <link href="style.css" media="screen print" ...
2. @media screen{ selector{rules} }

例子：

<style type="text/css">
    @media screen{
        body{
            background: green;
        }
    }
    @media handheld{
        body{
            background: red;
        }
    }
</style>




效果就是，screen设备的时候，背景是绿色，handheld设备的时候，背景是红色。

media query

media query是对type的增强，更适合移动互联网。一般由media type+一到多个CSS属性判断组成。属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。

 

支持与，或（逗号）；

not，排除指定的类型；only，用于隐藏老的用户代理的样式表；

min-和max-前缀来表达大于等于或小于等于。

 

支持的属性（与CSS属性不一样）：

 

注意IE9以下不支持！当然是有办法解决的，用respond.js。

 

例子：

@media screen and (min-width: 700px){
    body{
        background: green;
    }
}
@media screen and (max-width: 600px){
    body{
        background: red;
    }
}

 

效果就是screen设备并且宽度大于700px的时候显示绿色，screen设备并且宽度小于600px的之后显示红色。

没有指定的中间状态是默认的白色。

 

参考：

1. CSS媒体查询;
2. @media;
3. media type与media query