媒体查询的使用

最新推荐文章于 2023-02-11 09:36:08 发布

JoannaW951126

最新推荐文章于 2023-02-11 09:36:08 发布

阅读量141

点赞数

原文链接：http://www.cnblogs.com/quandong/p/7078219.html

版权

style960-640.css

.divleft {
        width: 25%;
        height: 200px;
        background-color: red;
        position: absolute;
        left:0;
        top: 0;
}
.divright {
        width: 75%;
        height: 200px;
        background-color: indigo;
        position: absolute;
        left: 25% ;
        top: 0;
}



style960.css

.divleft {
        width: 20%;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
}

.divcenter {
        width: 65%;
        height: 400px;
        background-color: #f4d526;
        position: absolute;
        left:20%  ;
        top: 0;
}
.divright {
        width: 15%;
        height: 200px;
        background-color: indigo;
        position: absolute;
        left: 85% ;
        top: 0;
}



style640.css

.divleft {
    height: 200px;
    background-color: red;
    }

.divcenter {
    height: 400px;
    background-color: #f4d526;
    }

.divright {
    height: 200px;
    background-color: indigo;
    }




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询的使用</title>
    <link rel="stylesheet" href="style960.css" media="(min-width:960px)">
    <link rel="stylesheet" href="style960-640.css" media="(min-width:640px) and (max-width:960px)">
    <link rel="stylesheet" href="style640.css" media="(max-width:640px)">
</head>
<body>
<ul>
    <h3>使用媒体查询实现响应式页面显示效果</h3>
    <li>3个div块左，中，右，依次的背景色为红，黄，蓝</li>
    <li>页面宽度大于等于960px时，可以同时显示3个div块，显示比例为20%,65%,15%</li>
    <li>页面宽度在640px----960px时,只显示左和右,显示比例：25%,75%</li>
    <li>页面宽度低于640px，那么3个块依次换行显示出来，默认都占满一行</li>
</ul>
    <div class="divleft"></div>
    <div class="divcenter"></div>
    <div class="divright"></div>
</body>
</html>