Как настроить элементы div таким образом, чтобы веб-сайт выглядел одинаково на устройствах с разными размерами экрана?

Question

У меня есть веб-сайт, на котором я периодически добавляю блоки (элементы div, называемые post-it) в больший элемент div (называемый section), ширина которого составляет 100%. Элемент section - это весь сайт, за исключением заголовков сайта. Я использовал абсолютное позиционирование для блоков, и я установил их местоположение на веб-сайте на основе верхнего и левого пикселей.

.section{
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    background-repeat: repeat-y;
    background-size:contain;
    background-color: #8B8B8B;
}

.post-it{
    height: 100px;
    width: 100px;
    font-family: 'Monte', sans-serif;
    font-size: 25;
    padding-top: 56.25%;

}

<header>
    <p>Sample header of webpage</p>
</header>
<div class="section">
    <div class = "post-it" style = "position: absolute; top: 640px; left: 20px;">
    .
    .
    .
    <div class = "post-it" style = "position: absolute; top: 1450px; left: 870px;">
    .
    (arbitrary amount of post-its added at different times)
</div>
<footer>
    <p>Sample footer of webpage</p>
</footer>

Когда я на своем ноутбуке, я могу добавить поле в самый правый раздел большего элемента div, и отображение веб-сайта не будет нарушено. Однако, когда я обновляю sh ту же страницу на моем телефоне с меньшим экраном, весь веб-сайт сжимается в верхнем левом углу окна браузера, а пост-это бездействует на белом фоне, который не является частью что я закодировал

Кроме того, когда я настраиваю окно браузера на рабочем столе, некоторые посты обрезаются. Для справки я не использовал таблицу на сайте для верстки. Как настроить элементы div таким образом, чтобы веб-сайт выглядел одинаково на устройствах с разными размерами экрана?

Answer 1

Обновлено - жесткие позиции

.section должны иметь position равным relative, чтобы указать, что absolute позиционированные дочерние элементы привязаны к нему. Затем вы можете попытаться использовать проценты, чтобы убедиться, что местоположение дочерних элементов остается в пределах .section в разных видовых экранах.

Однако невозможно обеспечить, чтобы позиционированные элементы absolute сохраняли намеченные позиции, не перекрывая другие элементы. на окнах разного размера при использовании исключительно встроенных стилей и абсолютных позиций.

Если вам необходимо использовать абсолютное позиционирование, вам потребуется создать идентификаторы для каждого .post-it, который вы жестко закодировали в HTML. Затем в вашем styles.css укажите медиазапросы для разных размеров области просмотра.

Я сделал демонстрацию медиазапросов и абсолютных позиций здесь: https://codepen.io/sevanbadal/pen/ExjBKEg

Это очень утомительно, потому что вы должны жестко кодировать новые id s для каждого .post-it. Затем в CSS вы добавляете идентификатор к каждому указанному вами медиазапросу.

Исходный ответ - с использованием гибких макетов

Вы можете использовать CSS Flexbox раскладка. Подробности смотрите в документации по Mozilla CSS Flexbox.

Для вашей проблемы примените flex к своему классу "section". Затем используйте justify-content для настройки того, как произвольное количество элементов div будет отображаться внутри макета flex. Flex-wrap также можно использовать для разбиения содержимого flex-макета на несколько строк.

Возможно, вы захотите удалить / изменить отступ от .post-it.

Попробуйте это код на .section:

.section{
  width: 100%;
  height: 1000px;
  background-repeat: repeat-y;
  background-size:contain;
  background-color: #8B8B8B;

  display: flex;
  flex-wrap: wrap;
}

И это для .post-it

.post-it{
  height: 100px;
  width: 100px;
  font-family: 'Monte', sans-serif;
  font-size: 25;
}