移动端常见布局之流式布局

最新推荐文章于 2024-05-08 11:06:58 发布

萌新菜鸟前端

最新推荐文章于 2024-05-08 11:06:58 发布

阅读量1k

点赞数

分类专栏：移动Web布局文章标签：个人学习日记

本文链接：https://blog.csdn.net/zh_hunan/article/details/102819341

版权

移动Web布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

移动端常见布局

移动端单独制作

流式布局（百分比布局）
flex 弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局

响应式

媒体查询
bootstarp

流式布局：

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

流式布局方式是移动web开发使用的比较常见的布局方式。

萌新菜鸟前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端常见布局之流式布局

移动端常见布局移动端单独制作流式布局（百分比布局）flex 弹性布局（强烈推荐）less+rem+媒体查询布局混合布局响应式媒体查询bootstarp流式布局：流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 <style> * { ...
复制链接

扫一扫

专栏目录