FIeldset 不想缩小到 360px 以下

Question

我正在尝试制作简单的货币转换器，但我无法正确设置字段集。当我尝试将网站调整到 360 像素以下（或使用智能手机视图）时，当其余部分较小时，fieldset 保持原位。我正在尝试使用 display:inlilne-block 和 min-width:0px 当我设置最小宽度时，fieldset 有效但输入保持原始宽度......我不知道现在该做什么：V 谢谢你的帮助。

let form = document.querySelector(".form");
let pln = document.querySelector(".form__currency--pln");
let usd = document.querySelector(".form__currency--usd");
let eur = document.querySelector(".form__currency--eur");
let gbp = document.querySelector(".form__currency--gbp");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    let usdResult = pln.value / 3.79;
    let eurResult = pln.value / 4.54;
    let gbpResult = pln.value / 5.25;
    usd.value = usdResult.toFixed(2);
    eur.value = eurResult.toFixed(2);
    gbp.value = gbpResult.toFixed(2);
})

html {
    box-sizing: border-box;
}

*, ::after, ::before {
    box-sizing: inherit;
}

.body {
    font-family: "Open Sans", "sans-serif";
    margin:0 auto;
    max-width: 1000px;
    background-color: grey;
    color:white;
    font-size: 30px;
}
.form {
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.form__fieldset {
    margin: 0 auto;
    border: 20px solid #05a9be;
}
.form__button {
    font-size: 30px;
    border: 6px solid #05a9be;
    padding: 5px;
    color: white;
    background-color: grey;
    margin: 5px;
}

.form__button:hover {
    background-color: rgb(170, 164, 164);
    text-decoration: none;
}

.form__currency {
    font-size: 25px;
}
.footer{
    margin:auto;
    background-color: #05a9be;
    text-align: center;
    margin:auto;
    margin-top: 40px;
}

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

<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">
    <script defer src="script/script.js"></script>
    <link href="style/style.css" rel="stylesheet">
    <link href="style/form.css" rel="stylesheet">
    <link href="style/footer.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
        integrity="sha512-oHDEc8Xed4hiW6CxD7qjbnI+B07vDdX7hEPTvn9pSZO1bcRqHp8mj9pyr+8RVC2GmtEfI2Bi9Ke9Ass0as+zpg=="
        crossorigin="anonymous" />

    <title>Przelicznik walut</title>
</head>

<body class="body">
    <form class="form">
        <div>
            <fieldset class="form__fieldset">
                <legend>Przelicznik walut</legend>
                <p>
                    <label class="form__label">
                        Kwota w PLN: <input class="form__currency form__currency--pln" min="0" type="number" step="any"
                            name="name" required placeholder="Wpisz kwotę" autofocus>
                    </label>
                </p>
                <button class="form__button">Przelicz</button><button type="reset" class="form__button">Wyczyść</button>
                <p>
                    <label class="form__label">
                        Kwota w USD: <input class="form__currency form__currency--usd" readonly>
                    </label>
                </p>
                <p>
                    <label class="form__label">
                        Kwota w EUR: <input class="form__currency form__currency--eur" readonly></label>
                </p>
                <p>
                    <label class="form__label">
                        Kwota w GBP: <input class="form__currency form__currency--gbp" readonly>
                    </label>
                </p>
            </fieldset>
        </div>
    </form>
    <footer class="footer">
        <p>&copyWojnowiak Paweł 2021</p>
    </footer>
</body>

</html>

Answer 1

对 fieldset 标签的所有子标签使用规则 max-width: 100%。这将允许子项的宽度等于 window 视口的宽度。为此，请将其添加到您的 css:

.form__fieldset * {
    max-width: 100%;
}

此外，覆盖标记 fieldset 中的规则 min-inline-size: min-content。必须覆盖为 min-inline-size: auto。将此规则添加到 class .form__fieldset:

.form__fieldset {
    ...
    min-inline-size: auto;
}

您的模板现在可以响应 window 视口。

let form = document.querySelector(".form");
let pln = document.querySelector(".form__currency--pln");
let usd = document.querySelector(".form__currency--usd");
let eur = document.querySelector(".form__currency--eur");
let gbp = document.querySelector(".form__currency--gbp");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    let usdResult = pln.value / 3.79;
    let eurResult = pln.value / 4.54;
    let gbpResult = pln.value / 5.25;
    usd.value = usdResult.toFixed(2);
    eur.value = eurResult.toFixed(2);
    gbp.value = gbpResult.toFixed(2);
});

html {
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: inherit;
}

.body {
    font-family: "Open Sans", "sans-serif";
    margin: 0 auto;
    max-width: 1000px;
    background-color: grey;
    color: white;
    font-size: 30px;
}

.form {
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.form__fieldset {
    margin: 0 auto;
    border: 20px solid #05a9be;
    min-inline-size: auto;
}

.form__fieldset * {
    max-width: 100%;
}

.form__button {
    font-size: 30px;
    border: 6px solid #05a9be;
    padding: 5px;
    color: white;
    background-color: grey;
    margin: 5px;
}

.form__button:hover {
    background-color: rgb(170, 164, 164);
    text-decoration: none;
}

.form__currency {
    font-size: 25px;
}

.footer {
    margin: auto;
    background-color: #05a9be;
    text-align: center;
    margin: auto;
    margin-top: 40px;
}

<!DOCTYPE html>
<html lang="pl">
    <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" />
        <script defer src="script/script.js"></script>
        <link href="style/style.css" rel="stylesheet" />
        <link href="style/form.css" rel="stylesheet" />
        <link href="style/footer.css" rel="stylesheet" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
            integrity="sha512-oHDEc8Xed4hiW6CxD7qjbnI+B07vDdX7hEPTvn9pSZO1bcRqHp8mj9pyr+8RVC2GmtEfI2Bi9Ke9Ass0as+zpg=="
            crossorigin="anonymous"
        />

        <title>Przelicznik walut</title>
    </head>

    <body class="body">
        <form class="form">
            <div>
                <fieldset class="form__fieldset">
                    <legend>Przelicznik walut</legend>
                    <p>
                        <label class="form__label"> Kwota w PLN: <input class="form__currency form__currency--pln" min="0" type="number" step="any" name="name" required placeholder="Wpisz kwotę" autofocus /> </label>
                    </p>
                    <button class="form__button">Przelicz</button><button type="reset" class="form__button">Wyczyść</button>
                    <p>
                        <label class="form__label"> Kwota w USD: <input class="form__currency form__currency--usd" readonly /> </label>
                    </p>
                    <p>
                        <label class="form__label"> Kwota w EUR: <input class="form__currency form__currency--eur" readonly /></label>
                    </p>
                    <p>
                        <label class="form__label"> Kwota w GBP: <input class="form__currency form__currency--gbp" readonly /> </label>
                    </p>
                </fieldset>
            </div>
        </form>
        <footer class="footer">
            <p>&copyWojnowiak Paweł 2021</p>
        </footer>
    </body>
</html>

FIeldset 不想缩小到 360px 以下

FIeldset dont want to shrink below 360px

html

css

width

fieldset