码迷,mamicode.com
首页 > 其他好文 > 详细

media type和media query

时间:2015-05-13 18:38:46      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

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的之后显示红色。
没有指定的中间状态是默认的白色。
 
参考:

media type和media query

标签:

原文地址:http://www.cnblogs.com/technology-life/p/4500748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!