有人可以幫助我使我的網站回應嗎？（HTML和CSS）-有解無憂

你好，有人可以幫助我讓這個網站對任何設備都有回應，或者給我一個關于如何做到這一點的提示。我已經嘗試過使用 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_(3-2_aspect_ratio).svg/220px-Flag_of_Germany_(3-2_aspect_ratio).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_(3-5).svg/1200px-Flag_of_the_United_Kingdom_(3-5).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>

uj5u.com熱心網友回復：

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

試試css媒體查詢，不同的設備有不同的斷點。我認為它是 320px — 480px 對于移動設備和 481px — 768px 對于平板電腦。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/363318.html

標籤：javascript html 弹性盒反应灵敏

上一篇：選中/取消選中Isotope中的輸入復選框

下一篇：RegExp`字符類中的范圍亂序`