主页 > 网站建设 >

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

网站建设 2023-01-28 21:39www.1681989.com免费网站

前言

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

dex

<!DOCTYPE html>
<html>
<head>
    <title>响应式布局</title>
    <meta charset="utf-8">
    <lk 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

{
    marg: 0;
    paddg: 0;
}

/适应PC端 宽度大于1000px/
@media screen and (m-width: 1000px) {
    #content{
        width: 960px;
        marg:0 auto;
    }

    #header{
        width: 100%;
        le-height: 100px;
        float: left;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 30px;
        marg-bottom: 10px;
    }

    #left{
        width: 200px;
        le-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        marg-right: 10px;
    }

    #center{
        width: 540px;
        le-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
    }

    #right{
        width: 200px;
        le-height: 400px;
        text-align: center;
        background: #333;
        float: right;
        font-size: 30px;
        color: #fff;
    }

    #footer{
        width: 960px;
        height: 200px;
        background: #333;
        color: #fff;
        le-height: 200px;
        font-size: 30px;
        text-align: center;
        float: left;
        marg-: 10px;
    }
}


/适应pad端 宽度在640-1000之间/
@media screen and (m-width: 640px) and (max-width: 1000px) {
    #content{
        width: 600px;
        marg:0 auto;
    }

    #header{
        width: 100%;
        le-height: 100px;
        float: left;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 30px;
        marg-bottom: 10px;
    }

    #left{
        width: 200px;
        le-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        marg-right: 10px;
    }

    #center{
        width: 390px;
        le-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
    }

    #right{
        width: 600px;
        le-height: 300px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        marg-: 10px;
    }

    #footer{
        width: 600px;
        height: 200px;
        background: #333;
        color: #fff;
        le-height: 200px;
        font-size: 30px;
        text-align: center;
        float: left;
        marg-: 10px;
    }
}


/适应移动端 宽度小于640/
@media screen and (max-width: 639px){
    #content{
        width: 400px;
        marg:0 auto;
    }

    #header{
        width: 100%;
        le-height: 100px;
        float: left;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 30px;
        marg-bottom: 10px;
    }

    #left{
        width: 100%;
        le-height: 150px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        marg-bottom: 10px;
    }

    #center{
        width: 100%;
        le-height: 300px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
    }

    #right{
        width: 100%;
        le-height: 150px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        marg-: 10px;
    }

    #footer{
        width: 100%;
        height: 200px;
        background: #333;
        color: #fff;
        le-height: 200px;
        font-size: 30px;
        text-align: center;
        float: left;
        marg-: 10px;
    }
}

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

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

PC端

Pad端

Phone端

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

上一篇：css中有序无序列表项list样式设置方法 下一篇：通过CSS向JS传参的方法

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by