Вопрос или проблема
Я создаю калькулятор, используя чистый HTML, CSS и JS, и нахожусь в процессе проектирования самого калькулятора. Однако у меня возникла проблема с размерами кнопок таким образом, чтобы они оставались отзывчивыми и были пропорциональны своему контейнеру ‘строке’.
Какой самый эффективный способ задать размеры кнопок, чтобы они были одинаковыми, подходили под контейнеры и оставались в своих соответствующих контейнерах?
Спасибо!
* {
border: 1px solid black;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
width: 40vh;
display: flex;
flex-direction: column;
}
.display {
flex: 1;
}
.buttons {
flex: 6;
display: flex;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
justify-content: space-evenly;
}
.num{
margin: 1vh;
position: relative;
padding: 10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79127990/calculator.css">
</head>
<body>
<h1>Калькулятор</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html></div><div class="s-prose js-post-body" itemprop="text">Вот код, не используйте границу как *
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
width: 20vw;
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.display {
flex: 1;
border: 1px solid #000;
}
.buttons {
flex: 6;
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid #000;
}
.row {
flex: 1;
display: flex;
justify-content: space-evenly;
margin-top: 10px;
}
.num {
width: 18%; /* Задайте ширину, чтобы контролировать размер кнопки */
height: 100%; /* Сделайте кнопки заполнять высоту строки */
padding: 10px; /* Добавьте немного отступа для лучшего взаимодействия */
font-size: 1.5em; /* Увеличьте размер шрифта для читаемости */
} <h1>Калькулятор</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>Совмещая сетку и флекс, вы можете сделать работу автоматически.
Примечание: возможно, вы захотите использовать текстовое поле для отображения вместо div, для доступности, а также в случае, если вы добавите интерактивность с помощью Javascript.
* {
border: 1px solid black;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
min-width: 40vh; /* Используйте min-width вместо фиксированной ширины/высоты, если нет выбора */
display: flex;
flex-direction: column;
}
.display {
flex: 1;
display: grid;
place-content: center;
}
.buttons {
display: grid;
row-gap: 6px; /* Вертикальный зазор */
}
.row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px; /* Горизонтальный зазор */
}
.num{
padding: 6px;
}
/*
* Опционально
* Каждый элемент в row4 будет занимать половину ширины строки
*/
.row4 {
grid-template-columns: repeat(2, 1fr);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79127990/calculator.css">
</head>
<body>
<h1>Калькулятор</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>.
Ответ или решение
Как задать размер объекта относительно родительского объекта с помощью CSS
В разработке интерфейсов, таких как калькуляторы, часто возникает необходимость правильно адаптировать размеры кнопок относительно их родительского контейнера. Давайте рассмотрим, как можно эффективно достичь этих целей с помощью CSS.
1. Использование Flexbox для обеспечения адаптивного дизайна
Flexbox — это мощный инструмент для создания гибких и адаптивных сеток. В вашем случае вы можете применять его, чтобы сделать кнопки одинакового размера, занимая равные доли доступного пространства в строке.
CSS для кнопок и строк:
.calculator {
display: flex;
flex-direction: column;
height: 50vh; /* Задаем высоту контейнера калькулятора */
}
.buttons {
display: flex;
flex-direction: column; /* Кнопки будут располагаться вертикально */
flex: 1; /* Задает, что этот блок займет оставшуюся часть контейнера */
}
.row {
flex: 1; /* Каждая строка будет занимать равную долю высоты родителя */
display: flex; /* Строки будут также гибкими */
justify-content: space-evenly; /* Кнопки будут равномерно распределены */
}
.num {
flex: 1; /* Каждая кнопка будет занимать равную долю ширины строки */
margin: 1vh; /* Добавляет отступ между кнопками */
padding: 10%; /* Внутренние отступы для удобства нажатия */
font-size: 1.5em; /* Увеличивает шрифт для лучшей читаемости */
}2. Применение Grid для лучшего контроля позиционирования
Еще одним вариантом является использование CSS Grid. Grid позволяет гораздо более точно контролировать разметку, что особенно важно для интерфейсов с множеством элементов.
CSS с использованием Grid:
.buttons {
display: grid;
grid-template-columns: repeat(5, 1fr); /* Задает 5 равных колонок */
gap: 1vh; /* Отступы между кнопками */
}
.row {
display: contents; /* Убирает дополнительные контейнеры, позволяет использовать Grid на уровне кнопок */
}
.num {
padding: 15px; /* Увеличение внутреннего отступа для кнопок */
}3. Учет соотношений сторон и размеров
Чтобы кнопки оставались пропорциональными относительно размеров их родителя, стоит также учитывать размеры в процентах.
Пример использования процентов:
.num {
width: 100%; /* Кнопки будут занимать 100% ширины своей колонки */
height: auto; /* Высота будет подстраиваться под текст */
}4. Учёт доступности
Важно также учитывать, что для элемента «вывода» стоит использовать <input> или <textarea> вместо <div>, так как это повышает доступность интерфейса. Например:
<div class="display">
<input type="text" readonly value="1 + 1">
</div>Заключение
Таким образом, использование CSS Flexbox или Grid в сочетании с правильным заданием размеров и пропорций дает возможность создать чистый, адаптивный и удобный интерфейс для калькулятора. Это не только оптимизирует взаимодействие пользователя с интерфейсом, но и делает его более доступным. Следует также помнить об использовании элементарных принятых стандартов веб-разработки для повышения удобства использования сервиса.