@media响应式布局

最新推荐文章于 2024-08-28 23:30:23 发布

键.

最新推荐文章于 2024-08-28 23:30:23 发布

阅读量1.6k

点赞数 3

分类专栏：前端特效文章标签： html html5 css3

本文链接：https://blog.csdn.net/beekim/article/details/120188342

版权

前端特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了响应式网页设计的基础语法，如@media查询，通过示例展示了如何根据不同屏幕尺寸调整布局。案例一是网页布局在PC、平板和手机端的适配，通过CSS控制元素宽高和背景色。案例二展示了仿文理学院官网的响应式布局，利用JavaScript实现头部导航的显示切换。同时，文章涵盖了HTML、CSS、JavaScript和媒体查询等关键技术。

摘要由CSDN通过智能技术生成

1.基础语法

@media语法：

文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

2.案例一

实例：

*{padding: 0;margin: 0;}
ul{list-style: none;}
ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 1500px;
    margin: 0 auto;
}
ul>li{
    width: 280px;
    height: 280px;
    background-color: gold;
    margin: 10px;
}
/* 定义断点设置不同屏幕的样式 media
max-width
min-width
*/
/* pc端 */
@media screen and (min-width:800px) and (max-width:1100px) {
    ul{
        width:100%;
    }
    ul li{
        width: 18%;
        margin: 1%;
        background-color: green;
    }
}
/* pad端 */
@media screen and (min-width:550px) and (max-width:799px) {
    ul{
        width:100%;
    }
    ul li{
        width: 48%;
        margin: 1%;
        background-color: lightblue;
    }
}    
/* 手机端 */
@media screen and (max-width:549px) {
    ul{
        width:100%;
    }
    ul li{
        width: 97%;
        margin: 1%;
        background-color: lightpink;
    }
}

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

效果：

3.案例二

仿文理学院官网的响应式布局

原网站布局演示：

我做的效果演示：

代码：

$(function(){
    //控制头部点击切换显示导航内容
    $(' .pm_header div').eq(1).click(function(){
       $('.padnav').slideToggle()
    })
})

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Document</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="wrap">

            <!-- 头部 -->
            <div class="header">
                <div class="h_content_pc">
                    <div class="h_content_pc_main">
                        <div>
                            <ul>
                                <li>首页</li>
                                <li>校友会</li>
                                <li>基金会</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>网上办事大厅</li>
                                <li>图书</li>
                                <li>邮箱</li>
                                <li>招聘</li>
                                <li>English</li>
                            </ul>
                        </div>
                    </div>       
                </div>

                <div class="h_content_pad">
                    <div class="h_content_pad_main">
                        <div class="pm_header">
                            <div>
                                <p>重庆文理学院</p>
                            </div>
                            <div>
                                <p></p>
                                <p></p>
                            </div>
                        </div>

                    </div>

                    <!-- 屏幕分辨率为pad时收缩的导航 -->
                    <div class="padnav">
                        <div class="padnav_main">
                            <div>
                                <p>学校概况</p>
                                <p>院系设置</p>
                                <p>人才培养</p>
                                <p>科学研究</p>
                                <p>招生就业</p>
                                <p>校园文化</p>
                                <p>合作交流</p>
                                <p>信息公开</p>
                            </div>
                            <div>
                                <p>首页</p>
                                <p>校友会</p>
                                <p>基金会</p>
                            </div>
                            <div>
                                <p>网上办事大厅</p>
                                <p>图书</p>
                                <p>邮箱</p>
                                <p>招聘</p>
                                <p>招标</p>
                                <p>English</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 显示logo的nav栏 -->
            <div class="nav">

            </div>

            <!-- 屏幕尺寸为pc时的nav导航栏 -->
            <div class="navbar">
                <div class="navbar_main">
                    <ul>
                        <li>学校概况</li>
                        <li>院系设置</li>
                        <li>人才培养</li>
                        <li>科学研究</li>
                        <li>招生就业</li>
                        <li>校园文化</li>
                        <li>合作交流</li>
                        <li>信息交流</li>
                    </ul>
                </div>
            </div>

            <!-- 轮播图 -->
            <div class="swipper">
                <img src="imgs/swipper01.jpg" >
            </div>

            <!-- 主体内容栏 -->
            <div class="main">
                <div class="top">
                    <div class="t_left">
                        <div>
                            <img src="imgs/news.jpg" alt="">
                            <p>学校获批高水平新工科建设高校和示范性现代产业学院</p>
                        </div>
                        <div>
                            <ul>
                                <li>学校获批高水平新工科建设高校和示范性现代...</li>
                                <li>学校开展新学期教学工作检查</li>
                                <li>学校获批高水平新工科建设高校和示范性现代...</li>
                                <li>学校开展新学期教学工作检查</li>
                                <li>学校获批高水平新工科建设高校和示范性现代...</li>
                                <li>学校开展新学期教学工作检查</li>
                                <li>学校获批高水平新工科建设高校和示范性现代...</li>
                                <li>学校开展新学期教学工作检查</li>
                                <li>学校获批高水平新工科建设高校和示范性现代...</li>
                                <li>学校开展新学期教学工作检查</li>   
                            </ul>
                        </div>
                    </div>

                    <div class="t_right">
                        <ul>
                            <li>2021校友会中国一流专业排名（应用型）第1位</li>
                            <li>我校《重庆高教研究》首次入选《中文核心期刊要目...</li>
                            <li>2021校友会中国一流专业排名（应用型）第1位</li>
                            <li>我校《重庆高教研究》首次入选《中文核心期刊要目...</li>
                            <li>2021校友会中国一流专业排名（应用型）第1位</li>
                            <li>我校《重庆高教研究》首次入选《中文核心期刊要目...</li>
                            <li>2021校友会中国一流专业排名（应用型）第1位</li>
                            <li>我校《重庆高教研究》首次入选《中文核心期刊要目...</li>
                            <li>2021校友会中国一流专业排名（应用型）第1位</li>
                            <li>我校《重庆高教研究》首次入选《中文核心期刊要目...</li>
                        </ul>



                    </div>
                </div>
            </div>

            <!-- 尾部 -->
            <div class="footer">
                <div class="footer_pc">
                    <div class="footer_pc_main">
                        <div>
                            <p>渝公网安备 50011802010053号 备案号:渝ICP备05001037号-1</p>
                        </div>
                        <div>
                            <ul>
                                <li>联系方式</li>
                                <li>红河校区：重庆市永川区红河大道319号</li>
                                <li>星湖校区：重庆市永川区卫星湖文化旅游区</li>
                                <li>邮编：402160</li>
                            </ul> 
                            <ul>
                                <li>友情链接</li>
                                <li>中华人民共和国教育部</li>
                                <li>重庆市人民政府网</li>
                                <li>重庆市教育委员会公众信息网</li>
                                <li>中国教育和科研计算机网</li>
                                <li>高等教育出版社</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="footer_pad">
                    <div class="footer_pad_main">
                        <ul>
                            <li>联系方式</li>
                            <li>红河校区：重庆市永川区红河大道319号</li>
                            <li>星湖校区：重庆市永川区卫星湖文化旅游区</li>
                            <li>邮编：402160</li>
                        </ul> 
                    </div>
                </div>
            </div>

        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
/* 头部 */
.header{
    width: 100%;
    background: #000;
}
.header .h_content_pc{
    display: block;
}
.header .h_content_pc_main{
    width: 1200px;
    margin: 0 auto;
    color: #fff;
    display: flex;
    justify-content: space-between;
}
.header .h_content_pc_main div ul{
    display: flex;
}
.h_content_pc_main div ul li{
    box-sizing: border-box;
    margin: 0 10px ;
    line-height: 50px;
}

.header .h_content_pad{
    display: none;
}
.header .h_content_pad_main{
    width: 100%;
    color: #fff;
    line-height: 50px;
}
.header .h_content_pad_main .pm_header{
    display: flex;
    justify-content: space-between;
}
.header .h_content_pad_main  .pm_header div{
    margin-left: 15px;
}
.header .h_content_pad_main .pm_header div:nth-child(2){
    margin-top: 15px;
    margin-right: 15px;
}
.header .h_content_pad_main .pm_header div:last-child p{
    width: 40px;
    height: 5px;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.padnav{
    display: block;
}
.padnav_main{
    width: 100%;
    height: 400px;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}
.padnav_main p{
    margin: 25px 0;
    text-align: center;
}

.nav{
    width: 100%;
    height: 100px;
    background: rgb(28, 133, 231);
}
.navbar{
    width: 100%;
    height: 50px;
    background: rgb(4, 57, 117);
}
.navbar_main{
    width: 1200px;
    margin: 0 auto;
}
.navbar ul{
    display: flex;
    color: #fff;
    justify-content: space-evenly;
    line-height: 50px;
}

.swipper{
    width: 100%;
    height: auto;
}
.swipper img{
    width: 100%;
    display: block;
}

.main{
    width: 1200px;
    margin: 0 auto;
}
.main .top {
    display: flex;
    justify-content: space-between;
}
.main .top .t_left{
    display: flex;
    font-size: 16px;
}
.main .top .t_left div:first-child{
    text-align: center;
    margin-top: 10px;
}
.main .top .t_left div:first-child p{
    background-color: rgb(29, 107, 252);
    font-size: 14px;
    box-sizing: border-box;
    padding: 5px;  
}
.main .top .t_left div:last-child{
    margin-left: 20px;
}


.main .top .t_left div:last-child ul li{
    margin: 10px 0;
    border-left: 3px solid rgb(29, 107, 252);

}

.main .top .t_left img{
    width: 400px;
}
.main .top .t_right{
    margin-right: 10px;
}
.main .top .t_right ul li{
    margin: 10px 0;
    border-left: 3px solid rgb(29, 107, 252);
}



.footer{
    width: 100%;
    height: 200px;
    color: #fff;
    background: #000;
}
.footer .footer_pc{
    display: block;
}
.footer_pc_main{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
}
.footer_pc_main div:first-child{
    width: 200px;
}
.footer_pc_main div:last-child{
    display: flex;
}
.footer_pc_main div:last-child ul{
    width: 220px;
    margin: 20px;
}


.footer_pad{
    display: none;
    overflow: hidden;
    font-size: 14px;
}
.footer_pad_main{
    width: 100%;
}
.footer_pad_main ul{
    width: 350px;
    margin: 50px;
}


/* 媒体查询 */

/* 控制头部 */
@media screen and (max-width:1350px){
    .header .h_content_pc_main{
        width: 100%;
    } 
    .navbar_main{
        width: 100%;
    } 


} 

/* 控制拖动时出现的底部和主体内容出现的X轴的滚动条 */
@media screen and (max-width:1221px){
    .main{
        width: 100%;
    }
    .footer_pc_main{
        width: 100%;
    }

    /* 控制主体内容的显示 */
    .top{
        display: flex;
        flex-direction: column;
    }
    .top .t_left{
        width: 100%;
        justify-content: space-evenly;
    }
    .main .top .t_left img{
        width: 500px;
    }
    .main .top .t_left div:last-child ul li{
        margin: 15px 0;
    }
    .t_right{
        margin-left: 20px;
    }
    .t_right ul{
        width: 100%;
    }
} 

/* 控制pad，手机端显示的尺寸 */
@media screen and (max-width:1000px){
    .header .h_content_pc{
        display: none;
    } 
    .header .h_content_pad{
        display: block;
    }
    .main{
        width: 100%;
    }
    .footer{
        width: 100%;
    }
    .navbar{
        display: none;
    }

    .footer .footer_pc{
        display: none;
    }
    .footer .footer_pad{
        display: block;
    }

    /* 控制主体内容的显示 */
    .top{
        display: flex;
        flex-direction: column;
    }
    .top .t_left{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .main .top .t_left img{
        width: 80%;
    }
    .main .top .t_left div:first-child {
        margin: 0 auto;
        width: 80%;
    }
    .main .top .t_left div:last-child {
        margin-top: 30px;
    }
    .main .top .t_left div:last-child ul li{
        margin: 15px 0;
    }
    .t_right{
        margin-top: 30px;
        margin-left: 20px;
    }
    .t_right ul{
        width: 90%;
    }
}