有人可以帮助我使我的网站具有响应性吗？（HTML 和 CSS）答案

【问题标题】：Could someone help me make my website Responsive? (HTML and CSS)有人可以帮助我使我的网站具有响应性吗？（HTML 和 CSS）
【发布时间】：2022-01-01 09:55:24
【问题描述】：

您好，有人可以帮我使这个网站对任何设备都具有响应性，或者给我一个提示，告诉我如何做到这一点。我已经尝试过使用 flex-shrink，但它不起作用。老实说，按钮动画不是来自我 -> CodePen 预设。可能是我无法使“按钮可自定义”的原因之一。（对不起我的英语不好；））

<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>KSSB</title>

    <link rel="stylesheet" href="css.scss">
</head>

<body>
    <h1 id="title">KSSB</h1>
    <div id="content">


        <div class="item container"><img class="img"
                src="https://d1ras9cbx5uamo.cloudfront.net/eyJidWNrZXQiOiAiY29tLm51bWVyYWRlIiwgImtleSI6ICJpbnN0cnVjdG9ycy80Y2ViNmRiYzc5NDc0YjRmYWIyNTcwZjZiNTM2MjM0Mi5qcGVnIiwgImVkaXRzIjogeyJyZXNpemUiOiB7IndpZHRoIjogMjU2LCAiaGVpZ2h0IjogMjU2fX19"
                style="width:160px;height:auto;"></div>

        <div class="item container"><img class="img"
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Flag_of_Germany_%283-2_aspect_ratio%29.svg/220px-Flag_of_Germany_%283-2_aspect_ratio%29.svg.png"
                style="width:160px;height:auto;"></div>

        <div class="item container"><img class="img"
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg/1200px-Flag_of_the_United_Kingdom_%283-5%29.svg.png"
                style="width:160px;height:auto;"></div>
    </div>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap');


        body {
            background-color: black;
            font-family: 'Shippori Antique', sans-serif;
        }

        #content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50vh;
        }

        .item {
            margin: 0 40px;
        }
        #title {
            text-align: center;
            color: #FFFFFF;
            text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 55px #ff0000, 0 0 75px;
            font-size: 8vh;
        }

        .item {
            position: relative;
        }

        .item::before,
        .item::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
            border: 2px solid rgb(255, 0, 0);
            transition: all 0.25s ease-out;
        }

        .item::before {
            background-color: rgb(255, 0, 0);
            top: -15px;
            left: -15px;
        }

        .item::after {
            bottom: -15px;
            right: -15px;
        }

        .item:hover::before {
            top: 15px;
            left: 15px;
        }

        .item:hover::after {
            bottom: 15px;
            right: 15px;
        }
    </style>
</body>

</html>

【问题讨论】：

标签： javascript html flexbox responsive

【解决方案1】：

    @media only screen and (max-width: xxem) {
    write your css queries here.
}

试试css媒体查询，不同的设备有不同的断点。我认为移动设备为 320px — 480px，平板电脑为 481px — 768px。

【讨论】：