Как создать эту адаптивную сетку изображений разного размера с помощью CSS и HTML, пример ниже

Question

Я пытаюсь создать отзывчивую страницу Pixel Perfect с сеткой фотографий разного размера. Мне было интересно, что лучший подход? Я делаю это с плавающим списком? Плавающих элементов нет в списке??

Я действительно не знаю. Ниже приведены два изображения, показывающие макет на полную ширину (1200 пикселей) и уменьшенную ширину (768 пикселей). Я понимаю, как изменить ширину контейнера и удалить элементы с помощью медиа-запросов, но я не знаю, как получить внешний вид, который я собираюсь использовать для других целей. Я использую колонки??

http://www.letsboogey.com/stackimages/1.jpg

http://www.letsboogey.com/stackimages/2.jpg

Answer 1

Для устройства 1200px вы можете создать 3 столбца li или div и поместить изображения, а именно A,G и H в первый столбец; B & C в средней колонке; E, F, D, I и J в третьем / последнем столбце. Используйте необходимые свойства CSS и исправьте изображения в соответствии с макетом сетки.

Для устройства 768px лучше всего расположить изображения относительно / абсолютно с помощью таких CSS-свойств, как Top, Left, Right и Bottom. Потому что вам не нужно менять макет HTML.

Я сделал ДЕМО для макета 768px здесь:

.wrapper {
  position: relative;
  width: 1200px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wrapper * {
  position: absolute;
  border: 2px solid #000;
}
.aaa {
  left: 0;
  top: 0;
  width: 598px;
  height: 700px;
}
.bbb {
  left: 600px;
  top: 0;
  width: 598px;
  height: 200px;
}
.ccc {
  left: 600px;
  top: 202px;
  width: 598px;
  height: 596px;
}
.ggg {
  left: 0;
  top: 702px;
  width: 298px;
  height: 96px;
}
.eee {
  left: 300px;
  top: 702px;
  width: 298px;
  height: 96px;
}
.ddd {
  left: 0px;
  top: 800px;
  width: 598px;
  height: 200px;
}
.iii {
  left: 600px;
  top: 800px;
  width: 298px;
  height: 200px;
}
.fff {
  left: 900px;
  top: 800px;
  width: 298px;
  height: 200px;
}

<ul class="wrapper">
  <li class="aaa">A</li>
  <li class="bbb">B</li>
  <li class="ccc">C</li>
  <li class="ggg">G</li>
  <li class="eee">E</li>
  <li class="ddd">D</li>
  <li class="iii">I</li>
  <li class="fff">F</li>
</ul>

Answer 2

Вы можете использовать этот генератор: https://www.entomic.com/responsivecss, это хороший сайт для адаптивного дизайна

Answer 3

Я рекомендую вам взглянуть на это: http://susy.oddbird.net/

Это своего рода "сеточная система", в которой вы разрабатываете свою собственную сетку, не добавляя слишком много дополнительной разметки к стилям для вашей сетки. Этим классам не нужно создавать строки, сетки, плавающие элементы и т. Д.

Я пробовал это один раз для небольшого проекта, и, честно говоря, мне нравится мощь, которую вы получаете, и разный подход к разработке при использовании инструмента разработки CSS, такого как Compass.