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

前言

现在的设备很多，有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代表最大的限制。

PC端

Pad端

Phone端

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。