简单的响应式布局 @media

最新推荐文章于 2021-09-08 20:40:53 发布

原创最新推荐文章于 2021-09-08 20:40:53 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

知识专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的响应式网页布局案例，当屏幕宽度大于1200px时，内容区域的尺寸会发生变化。通过CSS媒体查询实现不同屏幕尺寸下的布局调整。

屏幕大于1200px时，内容尺寸改变

效果图

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/demo.css"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <header id="header">
            <h3>页头</h3>
        </header>
        <nav id="navigation">
            <h3>导航</h3>
        </nav>
        <section id="mainbody">
            <h3>主体</h3>
            <p>lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦</p>
        </section>
        <aside id="sidebar">
            <h3>边栏</h3>
            <p>lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦lalallalallalal啦啦啦啦啦啦啦啦</p>
        </aside>
        <footer id="footer">
            <h3>页脚</h3>
        </footer>
    </div>
</body>
</html>

css

body{
    margin-top:40px;
    text-align: center;
}
.container{
    width: 960px;
    margin:0 auto;
}
#header, #navigation, #mainbody, #sidebar, #footer{
    line-height: 25px;
    height: 100px;
    background-color: rgb(187, 187, 187);
    margin-bottom: 20px;
}
#mainbody, #sidebar{
    float: left;
    height: 300px;
}
#mainbody{
    width: 520px;
    margin-right: 20px;
    background-color: blueviolet;
}
#sidebar{
    width: 420px;
    background-color: burlywood;
}
#footer{
    clear: both;
}
@media screen and (min-width:1200px){
    .container{
        width: 1170px;;
    }
    #mainbody{
        width: 720px;
        margin-right: 20px;
        background-color: blueviolet;
    }
    #sidebar{
        width: 430px;
        background-color: burlywood;
    }
}