#html #css
#HTML #css
Вопрос:
У меня есть медиа-запрос, который увеличивает ширину моего контейнера до 90%, когда экран становится меньше 550 пикселей, а когда генератор паролей переполняется, он увеличивает ширину до 500 пикселей вместо 90%. Как я могу это исправить? Переполнение происходит, когда я выбираю один из параметров пароля и устанавливаю длину в 50.
Ответ №1:
Оо этот веб-сайт немного режет мне глаза,
Ну, это потому, что вы используете flexbox на корпусе, чтобы исправить это, попробуйте:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600amp;display=swap");
body,
html {
padding: 0;
margin: 0;
background-color: blueviolet;
font-family: "Poppins", sans-serif;
color: black;
font-weight: 700;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 1.1em;
}
#generatorContainer {
width: 90%;
border: 2px solid white;
background-color: rgb(50, 64, 168);
padding: 0.5em;
}
#passwordContainer {
border-radius: 0.5em;
background-color: #3399ff;
overflow: auto;
}
.passwordFeaturesContainer {
display: flex;
justify-content: space-between;
margin: 0.5em 0;
}
#generatePasswordButton {
margin: 0 auto;
width: 80%;
display: block;
height: 60px;
}
#generatePasswordButton {
cursor: pointer;
background-color: rgb(50, 168, 52);
outline: none;
box-shadow: none;
color: rgb(50, 64, 168);
font-size: 1.2em;
font-weight: 700;
}
@media only screen and (min-width: 551px){
#generatorContainer {
width: 500px;
}
} <html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script data-dapp-detection="">
(function() {
let alreadyInsertedMetaTag = false
function __insertDappDetected() {
if (!alreadyInsertedMetaTag) {
const meta = document.createElement('meta')
meta.name = 'dapp-detected'
document.head.appendChild(meta)
alreadyInsertedMetaTag = true
}
}
if (window.hasOwnProperty('web3')) {
// Note a closure can't be used for this var because some sites like
// www.wnyc.org do a second script execution via eval for some reason.
window.__disableDappDetectionInsertion = true
// Likely oldWeb3 is undefined and it has a property only because
// we defined it. Some sites like wnyc.org are evaling all scripts
// that exist again, so this is protection against multiple calls.
if (window.web3 === undefined) {
return
}
__insertDappDetected()
} else {
var oldWeb3 = window.web3
Object.defineProperty(window, 'web3', {
configurable: true,
set: function (val) {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
oldWeb3 = val
},
get: function () {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
return oldWeb3
}
})
}
})()</script></head>
<body>
<div class="flex">
<form id="generatorContainer">
<div id="passwordContainer">
<h2>Password Generator</h2>
</div>
<div class="passwordFeaturesContainer">
<label for="passLength">Password Length</label>
<input type="number" step="1" min="4" max="50" id="passLength" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="lowerCase">Contain Lowercase Letters</label>
<input type="checkbox" id="lowerCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="upperCase">Contain Uppercase Letters</label>
<input type="checkbox" id="upperCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="numbers">Contain Numbers</label>
<input type="checkbox" id="numbers" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="symbols">Contain Symbols</label>
<input type="checkbox" id="symbols" required="">
</div>
<button type="submit" id="generatePasswordButton">Generate Password</button>
</form>
</div>
<script src="main.js"></script>
</body></html> Я добавил гибкий div вокруг генератора и также добавил класс для flex… Старайтесь избегать большого количества стилей для стандартных сгенерированных элементов, таких как html, body, script и т.д. И т.д. И, пожалуйста, попробуйте начать стилизацию с мобильной точки зрения (большинство веб-пользователей обычно являются мобильными пользователями), поэтому вместо использования медиа-запросов с максимальной шириной используйте min-width: 551px; В вашем случае вам в конечном итоге не понадобится медиа-запрос. Если вы просто используете max-width: 500px; на вашем #generatorContainer, этого достаточно.
Счастливого кодирования!!
Комментарии:
1. Привет, спасибо за ответ, я проверю это утром! Я видел, что вы сказали сначала code mobile, но как мне это сделать, когда я работаю на ПК и хочу сначала создать его и посмотреть, как это выглядит.
2. Что ж, каждый современный браузер в наши дни имеет встроенную адаптивную функциональность, хотя, если ее нет, вы можете изменить размер окна браузера, просто перетащив мышь, чтобы сделать его меньше.