• <tbody id="mx1tb"></tbody>
    <rp id="mx1tb"></rp>
  • <rp id="mx1tb"></rp>

    <th id="mx1tb"><p id="mx1tb"></p></th>
    <dd id="mx1tb"></dd>

    <th id="mx1tb"><pre id="mx1tb"></pre></th>
    <th id="mx1tb"></th>

    <span id="mx1tb"></span>
    <th id="mx1tb"><pre id="mx1tb"><sup id="mx1tb"></sup></pre></th>
    设为首页 - 加入收藏 湛江站长网 (http://www.morinnbuzz.com)- 中小站长们必上的网站 - 聚焦湛江站长前沿资讯!
    热搜: 网站 站长之家 什么 平台
    当前位置: 首页 > 创业 > 正文

    CSS3 Media Queries使用方法详解

    发布时间:2018-10-20 02:04 所属栏目:[创业] 来源:站长网
    导读:在css2中允许我们使用media的属性,例如使用screen和print,我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章,关于css2中的media文章,推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print,而且支持多媒体

    在css2中允许我们使用media的属性,例如使用screen和print,我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章,关于css2中的media文章,推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print,而且支持多媒体多分辨率的样式表。

    我们先来看下CSS3 Media Queries的演示实例:css3media.html,来自于(Web Designer Wall)

    Max Width

    故名思意,就是最大宽度的意思,例如下面的代码是在宽度小于600px的时候才执行的。

    @media screen and (max-width: 600px) {
    .class {
    background: #ccc;
    }
    }

    也可以在link标签里面使用media属性,即下面的写法:

    <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

    Min Width

    跟Max Width相反,是最小宽度,例如当宽度大于900px的时候才运行下面的代码

    @media screen and (min-width: 900px) {
    .class {
    background: #666;
    }
    }

    也可以在link标签里面使用media属性,即下面的写法:

    <link rel="stylesheet" media="screen and (min-width: 900px)" href="big.css" />

    Max和Min组合使用

    例如下面的代码是当屏幕的宽度在600px~900px之间才有效的:

    @media screen and (min-width: 600px) and (max-width: 900px) {
    .class {
    background: #333;
    }
    }

    Device Width

    这里的意思指的是设备的最大宽度,就是屏幕的宽度,像素,例如下面的代码:

    @media screen and (max-device-width: 480px) {
    .class {
    background: #000;
    }
    }

    知道这些有啥用?

    我们了解了CSS3的Media Queries的使用方法,就可以简单的使用CSS来控制不同的浏览器甚至不同的设备(例如iPhone,iPad等)使用不同的CSS文件,或者不同的css代码。

    在IE中使用CSS3的Media Queries

    在IE家族中CSS3的Media Queries只用在IE8+的浏览器才得到支持,而中国国内份额最大的IE6、IE7是不支持的,不过我们可以通过下面推荐的三篇教程方法来解决这个问题。

    1. CSS Tricks – using jQuery to detect browser size
    2. The Man in Blue – using Javascript
    3. jQuery的 Media Queries 插件

    【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

    网友评论
    推荐文章
    金亚洲代理