CSS页面是怎样完美实现响应式布局的，代码是什么

发布时间：2023-08-30 14:14:10 所属栏目：语言来源：

导读：这篇文章给大家分享的是“CSS页面是怎样实现响应式布局的，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

前言

现在的设备很

这篇文章给大家分享的是“CSS页面是怎样实现响应式布局的，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

前言

现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。

index

<!DOCTYPE html>

<html>

<head>

    <title>响应式布局</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div id="content">

        <div id="header">头部</div>

        <div id="left">左侧</div>

        <div id="center">中间</div>

        <div id="right">右侧</div>

        <div id="footer">底部</div>

    </div>

</body>

</html>

CSS

*{

    margin: 0;

    padding: 0;

}

/*适应PC端宽度大于1000px*/

@media screen and (min-width: 1000px) {

    #content{

        width: 960px;

        margin:0 auto;

    }

    #header{

        width: 100%;

        line-height: 100px;

        float: left;

        background: #333;

        color: #fff;

        text-align: center;

        font-size: 30px;

        margin-bottom: 10px;

    }

    #left{

        width: 200px;

        line-height: 400px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

        margin-right: 10px;

    }

    #center{

        width: 540px;

        line-height: 400px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

    }

    #right{

        width: 200px;

        line-height: 400px;

        text-align: center;

        background: #333;

        float: right;

        font-size: 30px;

        color: #fff;

    }

    #footer{

        width: 960px;

        height: 200px;

        background: #333;

        color: #fff;

        line-height: 200px;

        font-size: 30px;

        text-align: center;

        float: left;

        margin-top: 10px;

    }

}

/*适应pad端宽度在640-1000之间*/

@media screen and (min-width: 640px) and (max-width: 1000px) {

    #content{

        width: 600px;

        margin:0 auto;

    }

    #header{

        width: 100%;

        line-height: 100px;

        float: left;

        background: #333;

        color: #fff;

        text-align: center;

        font-size: 30px;

        margin-bottom: 10px;

    }

    #left{

        width: 200px;

        line-height: 400px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

        margin-right: 10px;

    }

    #center{

        width: 390px;

        line-height: 400px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

    }

    #right{

        width: 600px;

        line-height: 300px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

        margin-top: 10px;

    }

    #footer{

        width: 600px;

        height: 200px;

        background: #333;

        color: #fff;

        line-height: 200px;

        font-size: 30px;

        text-align: center;

        float: left;

        margin-top: 10px;

    }

}

/*适应移动端宽度小于640*/

@media screen and (max-width: 639px){

    #content{

        width: 400px;

        margin:0 auto;

    }

    #header{

        width: 100%;

        line-height: 100px;

        float: left;

        background: #333;

        color: #fff;

        text-align: center;

        font-size: 30px;

        margin-bottom: 10px;

    }

    #left{

        width: 100%;

        line-height: 150px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

        margin-bottom: 10px;

    }

    #center{

        width: 100%;

        line-height: 300px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

    }

    #right{

        width: 100%;

        line-height: 150px;

        text-align: center;

        background: #333;

        float: left;

        font-size: 30px;

        color: #fff;

        margin-top: 10px;

    }

    #footer{

        width: 100%;

        height: 200px;

        background: #333;

        color: #fff;

        line-height: 200px;

        font-size: 30px;

        text-align: center;

        float: left;

        margin-top: 10px;

    }

}

通过@media screen and (限制范围) 来控制网页的布局，例如

min-width代表最小的限制，max-width代表最大的限制。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!