写点什么

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

作者:秃头小帅oi
  • 2024-05-23
    福建
  • 本文字数:2099 字

    阅读完需:约 7 分钟

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

流式布局

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

使用 %

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

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

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

用户头像

摸个鱼,顺便发点有用的东西 2023-06-19 加入

互联网某厂人(重生版)

评论

发布
暂无评论
前端常见的页面自适应布局方案_秃头小帅oi_InfoQ写作社区