媒体查询

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

媒体类型，all：所有类型 screen：电脑，手机，平板 print：打印机

示例：

@media screen and (max- 300px) {

body { background-color:lightblue;

}

为屏幕类型为电脑，手机，平板，且宽度在0到300之间的设备设置背景色你也可以针对不同的媒体使用不同 stylesheets :

示例：

使用 @media 查询来制作响应式设计

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            font-family: "Lucida Sans", Verdana, sans-serif;
        }
        
        .main img {
            width: 100%;
        }
        
        h1 {
            font-size: 1.625em;
        }
        
        h2 {
            font-size: 1.375em;
        }
        
        .header {
            padding: 1.0121457489878542510121457489879%;
            background-color: #f1f1f1;
            border: 1px solid #e9e9e9;
        }
        
        .menuitem {
            margin: 4.310344827586206896551724137931%;
            margin-left: 0;
            margin-top: 0;
            padding: 4.310344827586206896551724137931%;
            border-bottom: 1px solid #e9e9e9;
            cursor: pointer;
        }
        
        .main {
            padding: 2.0661157024793388429752066115702%;
        }
        
        .right {
            padding: 4.310344827586206896551724137931%;
            background-color: #CDF0F6;
        }
        
        .footer {
            padding: 1.0121457489878542510121457489879%;
            text-align: center;
            background-color: #f1f1f1;
            border: 1px solid #e9e9e9;
            font-size: 0.625em;
        }
        
        .gridcontainer {
            width: 100%;
        }
        
        .gridwrapper {
            overflow: hidden;
        }
        
        .gridbox {
            margin-bottom: 2.0242914979757085020242914979757%;
            margin-right: 2.0242914979757085020242914979757%;
            float: left;
        }
        
        .gridheader {
            width: 100%;
        }
        
        .gridmenu {
            width: 23.481781376518218623481781376518%;
        }
        
        .gridmain {
            width: 48.987854251012145748987854251012%;
        }
        
        .gridright {
            width: 23.481781376518218623481781376518%;
            margin-right: 0;
        }
        
        .gridfooter {
            width: 100%;
            margin-bottom: 0;
        }
        
        @media only screen and (max- 500px) {
            .gridmenu {
                width: 100%;
            }
            .menuitem {
                margin: 1.0121457489878542510121457489879%;
                padding: 1.0121457489878542510121457489879%;
            }
            .gridmain {
                width: 100%;
            }
            .main {
                padding: 1.0121457489878542510121457489879%;
            }
            .gridright {
                width: 100%;
            }
            .right {
                padding: 1.0121457489878542510121457489879%;
            }
            .gridbox {
                margin-right: 0;
                float: left;
            }
        }
    </style>
</head>

<body>
    <div class="gridcontainer">
        <div class="gridwrapper">
            <div class="gridbox gridheader">
                <div class="header">
                    <h1>The Pulpit Rock</h1>
                </div>
            </div>
            <div class="gridbox gridmenu">
                <div class="menuitem">The Drive</div>
                <div class="menuitem">The Walk</div>
                <div class="menuitem">The Return</div>
                <div class="menuitem">The End</div>
            </div>
            <div class="gridbox gridmain">
                <div class="main">
                    <h1>The Walk</h1>
                    <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
                    <img src="./1558493802.png" alt="Pulpit rock" width="" height="">

                </div>
            </div>
            <div class="gridbox gridright">
                <div class="right">
                    <h2>What?</h2>
                    <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
                    <h2>Where?</h2>
                    <p>The Pulpit Rock is in Norway</p>
                    <h2>Price?</h2>
                    <p>The walk is free!</p>
                </div>
            </div>
            <div class="gridbox gridfooter">
                <div class="footer">
                    <p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

屏幕变小时，三分式设计变成单列式设计

你也可以针对不同的媒体使用不同 stylesheets :

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./test2.css">
    <link rel="stylesheet" href="./test1.css" media="screen and (max- 500px)">
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

test1.css:

div {
    width: 100%;
}

test2.css:

* {
    margin: 0px;
    padding: 0px;
}

div {
    width: 50%;
    height: 100px;
    float: left;
}

.div1 {
    background-color: red
}

.div2 {
    background-color: blue
}

注意引入的先后顺序，后引入的会覆盖前面引入的，所以条件越多的css文件越后引入

也可以使用@import和@media结合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./test2.css">
    <!-- <link rel="stylesheet" href="./test1.css" media="screen and (max- 500px)"> -->
    <style>
        @import url(test1.css) screen and (500px);
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

也可以3个或以上条件：

@media screen and (min-960px) and (max-1200px){

body{

background:yellow;

}