FIeldset 不想缩小到 360 像素以下

Question

i am trying to make simple currency conventer and i have problem to set fieldset properly.我正在尝试制作简单的货币转换器，但我无法正确设置字段集。 When i trying to resize site below 360px(or use smartphone view), fieldset stay in place when rest is smaller.当我尝试将站点大小调整为 360 像素以下（或使用智能手机视图）时，当 rest 较小时，字段集保持在原位。 I was trying use display:inlilne-block and min-width:0px When i set min-width, fieldset works but inputs stay in oryginal width... I have no idea what to do now:V Thanks for help.我正在尝试使用 display:inlilne-block 和 min-width:0px 当我设置 min-width 时，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

Use rule max-width: 100% for all children of the fieldset tag.对fieldset标记的所有子项使用规则max-width: 100% 。 This will allow the children to take a width equal to the width of the window's viewport.这将允许子项的宽度等于窗口视口的宽度。 To do this, add this to your css:为此，请将其添加到您的 css：

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

Also, override rule min-inline-size: min-content in tag fieldset .此外，覆盖标记fieldset中的规则min-inline-size: min-content 。 Must be overridden to min-inline-size: auto .必须覆盖min-inline-size: auto 。 Add this rule to class .form__fieldset :将此规则添加到 class .form__fieldset ：

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

Your template is now responsive to the window viewport.您的模板现在可以响应 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 不想缩小到 360 像素以下

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-04-19 18:10:36

FIeldset 不想缩小到 360 像素以下

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-04-19 18:10:36

解决方案1
0 已采纳 2021-04-19 18:10:36