响应式布局

最新推荐文章于 2024-06-13 09:59:43 发布

Hamstery

最新推荐文章于 2024-06-13 09:59:43 发布

阅读量221

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/SKY_Lake/article/details/81479556

版权

CSS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

响应式布局原则：移动端先行

flexbox 实现块流动

grid网格布局实现块布局变化（配合媒体查询）

可伸缩图像

max-width：100%;

弹性布局容器设置

max-width：960px;

对于子容器可设置百分比的宽度

Grid网格布局

对网格容器设置：

display: grid; //网格显示

grid-template-columns: //容器宽度

grid-template-rows: //容器高度

grid-gap: //行和列的间距

单位：fr：剩余宽度的百分比 20%：容器宽度的20% 400px：400个像素

repeat：（3，1fr）——重复3次

网格元素设置：

grid-row：1 / span 2；

grid-column：2；// 第一行第二列，占两行

Flexbox布局

有一个主容器，其中的子元素就是flex项目，flex 属性和规则都运用到主容器上

属性

flex-direction：row（主轴横向）、column（主轴纵向）

align-items：center（块之间居中对齐）、flex-start（顶部对齐）、flex-end（底部对齐）

justify-content：center（居中、紧贴）、space-between（等间距分布、贴边）、space-around（间隙分布）

flex-warp：nowarp（不换行）、warp（换行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            display: grid;
            grid-template-rows: 130px 30px 40px;
            grid-template-columns: 130px 200px;
        }

        .pic {
            grid-row: 1 / span 2;
            grid-column: 1;
            background: blue;
        }

        .title {
            grid-row: 1;
            grid-column: 2;
            background: pink;
        }

        .label {
            grid-row: 2;
            grid-column: 2;
            background: deeppink;
        }

        .price {
            grid-row: 3;
            grid-column: 1 / span 2;
            background: deepskyblue;
        }

        @media only screen and (min-width: 768px) {
            .box {
                display: grid;
                grid-template-rows: 240px 30px 30px 20px;
                grid-template-columns: 200px;
            }

            .pic {
                grid-row: 1;
                grid-column: 1;
                background: aliceblue;
            }

            .title {
                grid-row: 2;
                grid-column: 1;
                background: cadetblue;
            }

            .label {
                grid-row: 3;
                grid-column: 1;
                background: deepskyblue;
            }

            .price {
                grid-row: 4;
                grid-column: 1;
                background: lightskyblue;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="pic"></div>
    <div class="title"></div>
    <div class="label"></div>
    <div class="price"></div>
</div>
</body>
</html>

Hamstery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

响应式布局原则：移动端先行flexbox 实现块流动grid网格布局实现块布局变化（配合媒体查询）可伸缩图像max-width：100%;弹性布局容器设置max-width：960px;对于子容器可设置百分比的宽度Grid网格布局对网格容器设置：display: grid; //网格显示grid-te...
复制链接

扫一扫

专栏目录