[英]FIeldset dont want to shrink below 360px
我正在尝试制作简单的货币转换器，但我无法正确设置字段集。 当我尝试将站点大小调整为 360 像素以下（或使用智能手机视图）时，当 rest 较小时，字段集保持在原位。 我正在尝试使用 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>©Wojnowiak Paweł 2021</p> </footer> </body> </html>
对fieldset标记的所有子项使用规则max-width: 100% 。 这将允许子项的宽度等于窗口视口的宽度。 为此，请将其添加到您的 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>©Wojnowiak Paweł 2021</p> </footer> </body> </html>
为什么@media（max-device-width：360px）受@media影响（max-device-width：1024px）？
[英]Why is @media (max-device-width: 360px) affected by the @media (max-device-width: 1024px)?
当@media屏幕和（max-width：360px）应该居中时，如何将右div的内容居中
[英]how to center the content of right div in center also when @media screen and (max-width : 360px) it should be at center
移动浏览器将元素定位为 360 像素宽的视图，但在页面上以更高的分辨率呈现图像。 这是如何运作的？
[英]Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work?
当菜单的 class 名称不是“xxx”时，我想链接到锚点下方的 go 50px
[英]I want link to go 50px below anchor when class name of the menu is not "xxx"
我想要输入框和搜索按钮组合？ 为什么 div 适用于我希望从下方顶部 40px 搜索的边距
[英]i want the input box and the search button combine? why the div is applicable of the margin i want that search from the top 40px below
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.