利用flex布局和rem适配，实现页面随窗口变动而变动。

最新推荐文章于 2022-12-16 11:56:49 发布

前端摇滚家

最新推荐文章于 2022-12-16 11:56:49 发布

阅读量1.2k

点赞数

分类专栏：前端学习经验文章标签： css3 html js

本文链接：https://blog.csdn.net/liu5282828/article/details/108741669

版权

前端学习经验专栏收录该内容

8 篇文章 0 订阅

订阅专栏

刚完成一个项目，因为页面的缩放问题，被老师说了一顿。
特此学习了flex布局和rem适配方法，算是完成了效果。
自己还在学习另外的通用方法。
在这里插入图片描述
可以看到随着页面的缩小，页面上的盒子也在变小，字体也在变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <script src="js/flexible.js"></script>
    <style>
        body{
            width: 100%;
            height: 100%;
            background: url("img/body0.3B.png") no-repeat;
        }
        .container{
            display: flex;
            width: 100%;
            flex-direction: column;
            align: center;
            margin-left: 5rem;
        }
        .topbox{
            display: flex;
            border: 1px solid red;
            width:95%;
            height: 10rem;
            justify-content: center;
            align-items:flex-end;

        }
        .header{
            border: 1px solid blue;
            height:6rem;
            width: 50rem;
            margin-left:35rem;

        }
        .time{
            border: 1px solid chartreuse;
            height:2rem;
            width: 35rem;
        }
        .bottumbox{
            display: flex;
            border: 1px solid blueviolet;
            width: 95%;
            height: 90rem;
            justify-content: space-between;
        }
        .bleftbox{
            border: 1px solid aquamarine;
            width: 30%;

        }
        .bmiddlebox{
            border: 1px solid violet;
            width: 38%;

        }
        .brightbox{
            border: 1px solid peru;
            width: 30%;

        }
        h1{
            color: white;
            line-height: 2rem;
            text-align: center;
            font-size: 3rem;
            font-weight: 600;
        }
    </style>
</head>
<body>
<!--最大盒子-->
<div class="container">
   <!-- 上盒子（标题和时间戳）-->
    <div class="topbox">
        <div class="header">
            <h1>自适应缩放窗口</h1>
        </div>
        <div class="time"></div>
    </div>
 <!--   下盒子（左中右）-->
    <div class="bottumbox">
        <div class="bleftbox"></div>
        <div class="bmiddlebox"></div>
        <div class="brightbox"></div>
    </div>

</div>
</body>
</html>

前端摇滚家

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用flex布局和rem适配，实现页面随窗口变动而变动。

刚完成一个项目，因为页面的缩放问题，被老师说了一顿。特此学习了flex布局和rem适配方法，算是完成了效果。自己还在学习另外的通用方法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <script src="js/flexible.js"></script>
复制链接

扫一扫