使用 flex 布局实现方块在页面中垂直水平居中并随屏幕大小变化背景颜色

最新推荐文章于 2024-05-03 15:43:47 发布

那就再眯一会

最新推荐文章于 2024-05-03 15:43:47 发布

阅读量511

点赞数

文章标签： css css3 html 前端 less

本文链接：https://blog.csdn.net/weixin_50818816/article/details/125695644

版权

页面实例：

使用flex布局使其水平垂直居中

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./src/style.css">
</head>

<body>
    <div class="contain">
        <div class="center"></div>
    </div>
</body>

</html>

./src/style.css

body {
    max-width: 800px;
    margin: 0 auto;
}

@media(max-width:800px) {
    body {
        background-color: #0984e3;
    }
}

@media (min-width:900px) {
    body {
        background-color: #fdcb6e;
    }
}

@media(min-width:1000px) {
    body {
        background-color: #55efc4;
    }
}

.contain {
    height: 500px;
    display: flex;
    background-color: #fab1a0;
    justify-content: center;
    align-items: center;
}

.contain .center {
    width: 200px;
    height: 200px;
    background-color: #ff7675;
}

使用媒体查询来创建响应式网站：

 @media screen and (屏幕大小设置) {
            选择器 {
                样式
            }
        }

媒体特性常用写法

max-width
min-width

     在800px或更小的屏幕上，背景颜色为蓝色
     在900px或更大的屏幕上，背景颜色为黄色
     在1000px或更大的屏幕上，背景颜色为绿色

@media(max-width:800px) {
    body {
        background-color: #0984e3;
    }
}

@media (min-width:900px) {
    body {
        background-color: #fdcb6e;
    }
}

@media(min-width:1000px) {
    body {
        background-color: #55efc4;
    }
}