前端常见的页面自适应布局方案

胖头鱼不吃鱼-

于 2024-05-23 14:30:20 发布

阅读量747

点赞数 8

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/pantouyuchiyu/article/details/139146638

版权

流式布局

使用百分比单位等单位来表示长度和宽度，这样在整体的长度和宽度变化的时候，里面的内容也会发生变化。

使用 %

直接使用百分比，在页面宽度变化的时候会对应放大缩小。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container-box {
            width: 100%;
            height: 100vh;
            background-color: orange;
            padding: 1px;
        }
        .first,
        .second,
        .third {
            width: 80%;
            height: 30%;
            background-color: skyblue;
            margin: 1% auto;
        }
    </style>

    <body>
        <div class="container-box">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
        </div>
    </body>
</html>

使用 rem

可以根据宽度的变化来修改根标签html中的 font-size属性的大小，然后就可以在改变宽度的时候改变页面中元素的带下。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .container-box {
            width: 100%;
            height: 100vh;
            padding: 1px;
            background-color: orange;
        }
        .first,
        .second,
        .third {
            width: 20rem;
            height: 20rem;
            margin: 1rem auto;
            background-color: skyblue;
        }
        @media screen and (max-width: 768px) {
            html {
                font-size: 12px;
            }
        }
    </style>

    <body>
        <div class="container-box">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
        </div>
    </body>
</html>

直接使用媒体查询

这个不就描述了，其实就是和使用 rem 差不多，只不过是直接重写在不同宽度下的样式而已。

弹性布局

display: flex

这个在整个页面是单个 div 时可能比较有用，如果页面有多个 div 都需要自适应，那么可能会相互影响布局。

栅格布局

使用 grid 本身的一些属性来实现响应式。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .container-box {
            width: 100%;
            height: 100vh;
            padding: 1px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 列自适应，最小宽度200px */
            grid-gap: 10px; /* 设置网格间隙为10px */
        }
        .item {
            background-color: #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
    </style>

    <body>
        <div class="container-box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
    </body>
</html>

以上就是常见的几种响应式方案。

总结

关于前端自适应布局方案的内容已经说完了，但是我还想说点别的，主要想说一下我们应该学习哪些技术才能让它更加保值。

在我看来，越偏向于业务的技术越不容易过时，为什么呢？需求在变，技术一直在变，业务也一直在迭代。前端技术的发展非常快，也涌现出很多的框架（例如 HTML4 到 HTML5 的升级，或者从jQuery 到前端三大框架的转变），但是总归就是两个字：效率。

作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。

介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

JNPF可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量，通过图形化、可视化的界面，以拖放组件的方式，即可快速生成应用程序的产品，大幅降低了开发企业管理类软件的难度。

当然，我更建议大家成为一个全栈，不要把自己的定位局限于前端。

胖头鱼不吃鱼-

关注

8
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
前端常见的页面自适应布局方案

关于前端自适应布局方案的内容已经说完了，但是我还想说点别的，主要想说一下我们应该学习哪些技术才能让它更加保值。在我看来，越偏向于业务的技术越不容易过时，为什么呢？需求在变，技术一直在变，业务也一直在迭代。前端技术的发展非常快，也涌现出很多的框架（例如 HTML4 到 HTML5 的升级，或者从jQuery 到前端三大框架的转变），但是总归就是两个字：效率。作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。介绍一款程序员都应该知道的软件。
复制链接

扫一扫