CSS中规则@media的用法

时间 2019-12-18

标签 css 规则 media 用法栏目 CSS 繁體版

原文原文链接

CSS中@规则是由@符号开始的，例如@import，@page等。css

@media就是其中的一个规则。html

@media能够让你根据不一样的屏幕大小而使用不一样的样式，这能够使得不须要js代码就能实现响应式布局。css3

不过@media只能用于较新的浏览器，对于老式的IE，不支持。下面是@media支持的浏览器。浏览器

@media的语法比较简单，一眼就能看懂。ide

@media mediatype and|not|only (media feature) {
CSS-Code;
}布局

能够参考http://www.w3cschool.cc/c***ef/css3-pr-mediaquery.html值的说明。3d

其中mediatype就是媒体类型，能够包括好多种，最经常使用的就是screen，其余多数已经做废。xml

media feature就定义了这个media设备的一些特征，简单的说就是媒体知足什么条件，经常使用的就是max-width，min-width。htm

经过指定屏幕的大小，而采用不一样的样式。blog

举个例子演示如何用@media规则实现响应式布局。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .contain {
             925px;
            margin:0 auto;
        }

        .c1 {
            width: 300px;
            height: 100px;
            float: left;
            margin: 2px;
            background-color: yellowgreen;
        }


        @media only screen and (min-width: 620px) and (max-width: 930px) {
            .contain {
                width: 610px;
                margin-right: auto;
                margin-left: auto;
            }
        }

        @media only screen and (max-width: 620px) {
            .contain {
                width: 300px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    <div class="contain">
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
    </div>

</body>
</html>

-----------------------------------------

@media only screen and (min- 620px) and (max-width: 930px)
@media only screen and (max- 620px)
上述2个规则，当屏幕宽度在620px如下，和620px-930px，使用的contain样式是不一样的。

截图：

当浏览器宽度在1024px的状况下，显示效果以下：

当浏览器宽度在680px的状况下，显示以下：

当浏览器宽度在480px的状况下，显示以下：