网页的5种布局方式

最新推荐文章于 2024-04-26 17:20:09 发布

偷笑ing

最新推荐文章于 2024-04-26 17:20:09 发布

阅读量5.9k

点赞数 67

分类专栏： html 文章标签： html 网页布局 css javascript

本文链接：https://blog.csdn.net/qq_38557202/article/details/102750512

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页的5种布局

一、静态布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            width: 100%;
        }
        .container{
            width: 1200px;
            margin: 0 auto;
            height: 2000px;
            background: #f00;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

设计：

布局元素居中布局，设置width固定宽度。

二、流式布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            width: 100%;
        }
        .container{
            max-width: 1920px;
            min-width: 1200px;
            width: 100%;
            height: 50vw;
            min-height: 600px;
            margin: 0 auto;
            background: #f00;
        }
        .box{
            float: left;
            width: 20%;
            height: 40%;
            background: #00f;
            box-sizing: border-box;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>                                
    </div>
</body>
</html>

设计：

布局元素宽度使用百分比并使用min-width或max-width限制，高度使用vw并使用min-height或max-height限制使布局元素长宽比一致。

内容元素使用百分比。

使整体布局一致。流式布局代表：栅格系统。

三、自适应布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            width: 100%;
        }
        .container{
            margin: 0 auto;
            background: #f00;
            height: 700px;
            width: 100%;
        }
        @media (min-width: 576px) {
            .container{
                width: 540px;
            }
        }
        @media (min-width: 768px) {
            .container{
                width: 720px;
            }
        }
        @media (min-width: 992px) {
            .container{
                width: 960px;
            }
        }
        @media (min-width: 1200px) {
            .container{
                width: 1140px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

设计：

使用媒体查询在不同断点适用不同静态布局。

四、响应式布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            width: 100%;
        }
        .container{
            margin: 0 auto;
            background: #f00;
            height: 700px;
            width: 100%;
            font-size: 0px;
        }
        .box{
            background: #00f;
            height: 100px;
            display: inline-block;
            box-sizing: border-box;
            border: 1px solid;
        }
        .xs-1{width: 8.333%} 
        .xs-2{width: 16.666%}
        .xs-3{width: 25%}
        .xs-4{width: 33.333%}
        .xs-5{width: 25%}
        .xs-6{width: 50%}
        .xs-7{width: 41.666%}
        .xs-8{width: 58.333%}
        .xs-9{width: 66.666%}
        .xs-10{width: 83.333%}
        .xs-11{width: 91.666%}
        .xs-12{width: 100%}
        @media (min-width: 576px) {
            .container{
                width: 540px;
            }
            .sm-1{width: 8.333%} 
            .sm-2{width: 16.666%}
            .sm-3{width: 25%}
            .sm-4{width: 33.333%}
            .sm-5{width: 25%}
            .sm-6{width: 50%}
            .sm-7{width: 41.666%}
            .sm-8{width: 58.333%}
            .sm-9{width: 66.666%}
            .sm-10{width: 83.333%}
            .sm-11{width: 91.666%}
            .sm-12{width: 100%}
        }
        @media (min-width: 768px) {
            .container{
                width: 720px;
            }
            .md-1{width: 8.333%} 
            .md-2{width: 16.666%}
            .md-3{width: 25%}
            .md-4{width: 33.333%}
            .md-5{width: 25%}
            .md-6{width: 50%}
            .md-7{width: 41.666%}
            .md-8{width: 58.333%}
            .md-9{width: 66.666%}
            .md-10{width: 83.333%}
            .md-11{width: 91.666%}
            .md-12{width: 100%}
        }
        @media (min-width: 992px) {
            .container{
                width: 960px;
            }
            .lg-1{width: 8.333%} 
            .lg-2{width: 16.666%}
            .lg-3{width: 25%}
            .lg-4{width: 33.333%}
            .lg-5{width: 25%}
            .lg-6{width: 50%}
            .lg-7{width: 41.666%}
            .lg-8{width: 58.333%}
            .lg-9{width: 66.666%}
            .lg-10{width: 83.333%}
            .lg-11{width: 91.666%}
            .lg-12{width: 100%}
        }
        @media (min-width: 1200px) {
            .container{
                width: 1140px;
            }
            .xl-1{width: 8.333%} 
            .xl-2{width: 16.666%}
            .xl-3{width: 25%}
            .xl-4{width: 33.333%}
            .xl-5{width: 25%}
            .xl-6{width: 50%}
            .xl-7{width: 41.666%}
            .xl-8{width: 58.333%}
            .xl-9{width: 66.666%}
            .xl-10{width: 83.333%}
            .xl-11{width: 91.666%}
            .xl-12{width: 100%}
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box lg-2 md-4 sm-6 xs-12"></div>
        <div class="box lg-2 md-4 sm-6 xs-12"></div>
        <div class="box lg-2 md-4 sm-6 xs-12"></div>
        <div class="box lg-2 md-4 sm-6 xs-12"></div>
        <div class="box lg-2 md-4 sm-6 xs-12"></div>
        <div class="box lg-2 md-4 sm-6 xs-12"></div>
    </div>
</body>
</html>

设计：

自适应和流式布局的结合，响应式布局的代表：bootstrap。

五、弹性布局和rem/em布局

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            width: 100%;
        }
        .container{
            background: #f00;
            width: 7.5rem;
            height: 7.5rem;
            margin: 0 auto;
            font-size: 0.36rem;
            text-align: center; 
        }
    </style>
</head>
<body>
    <div class="container">你好！！！</div>
    <script>
        (function(doc, win){
            var design = 750;
            var resetScale = function(){
                var deviceWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
                if (deviceWidth >= 750) {
                    doc.documentElement.style.fontSize = '100px';
                } else {
                    doc.documentElement.style.fontSize = deviceWidth / design * 100 + 'px';
                }
            }
            window.addEventListener('resize', resetScale, false);
            window.addEventListener('DOMContentLoaded', resetScale, false);
        })(document, window);
    </script>
</body>
</html>

设计：

弹性布局使用flex。

rem/em布局使用rem调整各元素尺寸和文字大小，以上以750的设计稿，1rem = 100px，适用于移动端的页面。

总结：

对于需要移动端和pc端的网站，可以使用window.navigator.userAgent，判断访问平台，跳转移动端的站点或pc端的站点。

偷笑ing

关注

67
点赞
踩
321

收藏

觉得还不错? 一键收藏
2
评论
网页的5种布局方式

网页的5种布局一、静态布局<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
复制链接

扫一扫