实现适配（@media + rem）

最新推荐文章于 2023-06-25 12:01:53 发布

LHYDAIDAI

最新推荐文章于 2023-06-25 12:01:53 发布

阅读量168

点赞数

文章标签： css

本文链接：https://blog.csdn.net/LHYDAIDAI/article/details/119278384

版权

实现适配（@media + rem）

在这里插入图片描述

代码如下（示例）：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 10px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: rgb(233, 112, 112);
            display: flow-root;
        }

        li {
            float: left;
            width: 100%;
            padding: 2rem 0;
        }

        div {
            border-radius: 50%;
            background-color: white;
            width: 8rem;
            height: 8rem;
            margin: 0.5rem auto;
        }

        span {
            display: block;
            text-align: center;
            line-height: 1.4em;
            font-size: 3rem;
        }

        @media screen and (min-width: 768px) {
            ul {
                background-color: rgb(233, 112, 112);
            }

            li {
                width: 50%;
            }

            div {
                width: 5rem;
                height: 5rem;
            }

            span {
                font-size: 2.4rem;
            }
        }

        @media screen and (min-width: 992px) {
            ul {
                background-color: rgb(233, 112, 112);
            }

            li {
                width: 33.3333%;
            }

            div {
                width: 5rem;
                height: 5rem;
            }

            span {
                font-size: 2.4rem;
            }
        }

        @media screen and (min-width: 1200px) {
            ul {
                background-color: rgb(233, 112, 112);
            }

            li {
                width: 16%;
            }

            div {
                width: 3rem;
                height: 3rem;
            }

            span {
                font-size: 1.6rem;
            }
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div></div>
            <span>
                我是个大头
            </span>
        </li>
        <li>
            <div></div>
            <span>
                我是个大头
            </span>
        </li>
        <li>
            <div></div>
            <span>
                我是个大头
            </span>
        </li>
        <li>
            <div></div>
            <span>
                我是个大头
            </span>
        </li>
        <li>
            <div></div>
            <span>
                我是个大头
            </span>
        </li>
        <li>
            <div></div>
            <span>
                我是个大头
            </span>
        </li>
    </ul>
</body>

</html>

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

布卡教育

LHYDAIDAI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现适配（@media + rem）

实现适配（@media + rem）代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html { font-size: 10px; } ul {
复制链接

扫一扫