媒体查询

1.背景随着边框的大小改变

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@media only screen and (min- 0px) and (max- 768px) {
    body {
        background-color: red;
    }
}

@media only screen and (min- 768px) and (max- 992px) {
    body {
        background-color: green;
    }
}

@media only screen and (min- 992px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

</body>
</html>

2.bootStrap

超小屏幕

手机 0-768px

小屏幕

平板768-992

中等屏幕

电脑992-1200

大屏幕

电脑1200-?

Col-xs-

Col-sm-

Col-md

Col-lg

2.1bootStrap使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: red;">1111</div>
                <div  class="col-xs-12 col-sm-6 col-md-4" style="background-color: green;">222</div>
                <div  class="col-xs-12 col-sm-6 col-md-4" style="background-color: blue;">333</div>
            </div>
        </div>
    </body>
</html>