简单的响应式布局 @media

最新推荐文章于 2024-06-07 19:37:27 发布

与慕

最新推荐文章于 2024-06-07 19:37:27 发布

阅读量139

点赞数

分类专栏：知识文章标签： css

本文链接：https://blog.csdn.net/qq_36664799/article/details/109148402

版权

知识专栏收录该内容

24 篇文章 1 订阅

订阅专栏

屏幕大于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;
    }
}

与慕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的响应式布局 @media

屏幕大于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
复制链接

扫一扫

专栏目录