CSS网页响应式布局 自动适配Pc/Pad/Mobile设备

前言

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

index

<!DOCTYPE html>
<html>
<head>
    <title>响应式布局</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <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代表最大的限制。

PC端

pc_看图王.png

Pad端

pad.png

Mobile端

phone.png

体验Demo

PC端:点击体验
Pad和Mobile端:扫码体验

image.png

作者

Author:TANKING
Web:http://www.likeyunba.com
Date:2020-2-15
WeChat:face6009

阅读 1.5k

推荐阅读
目录