Отзывчивые шаблоны CSS без медиазапросов

Здесь нет причудливых трюков, просто flexbox с flex-wrap но он работает без проблем. Конечно, Flexbox можно использовать не только для создания двух столбцов, но и для простой демонстрации. Основные части этой техники просто:

 <div class="container"> <div class="img">...</div> <div class="content">...</div> </div> ... 

 .container { display: flex; flex-wrap: wrap; flex-direction: row; } .container .content, .container .img { flex: 1 0 12em; /* Change 12em to your breakpoint. */ } 

Понимание flex-grow , flex-shrink и flex-basis является важной частью правильного решения этой проблемы; Я нахожу этот наконечник flexbox от Zoe Gillenwater действительно полезным для понимания взаимосвязи между этими свойствами.

«Потрясающая Техника Четыре»

Использование width , min-width , max-width и calc для создания переключателя ширины на основе точки останова, получившего название «Техника Fab Four», был детищем мозга Реми Парментье . Первоначально созданный для помощи с адаптивными электронными письмами, он может легко использоваться для обычных веб-страниц и действительно открыл некоторые новые возможности в создании самоадаптируемых модулей, как продемонстрировал Тьерри . Например,

 { min-width: 50%; width: calc((25em - 100%) * 1000); max-width: 100%; /* Change 25em to your breakpoint. */ } 

Это работает, потому что когда width является процентом, это процент от ширины контейнера элемента. Затем функция calc сравнивает это значение с требуемой точкой останова и затем генерирует действительно большое положительное число (если ширина меньше, чем точка останова), или действительно большое отрицательное число (если ширина больше, чем точка останова), или ноль, если есть точное совпадение. Большая положительная ширина ограничена max-width а большая отрицательная или нулевая ширина устанавливается равной значению min-width .

Итак, в приведенном выше примере мы установили 25em останова 25em . Это разрешает до 400px если размер шрифта составляет 16px . Если 400px контейнера составляет 400px или выше (другими словами, равен или превышает 400px останова), ширина преобразуется в 0 или большое отрицательное число:
(400 - 400 = 0) * 1000 = 0 или (400 - 401 = -1) * 1000 = -1000

С такими значениями, min-width вступает в силу, поэтому результирующая ширина элемента в примере выше будет 50% . Однако, если 399px контейнера составляет 399px или ниже (другими словами, меньше, чем точка останова), ширина преобразуется в большое положительное число:
(400 - 399 = 1) * 1000 = 1000

В этом случае max-width вступает в силу, и результирующая ширина составляет 100% . Следующая диаграмма должна помочь визуализировать этот процесс:

 { /* Removed min-width since we want the width to be zero at this point and negative widths are treated as zero */ /* Inverted the multiplier: */ width: calc((25em - 100%) * -1000); max-width: 100%; /* Change 25em to your breakpoint. */ } 

 .pull { /* Pull the text up over the image by this much: */ margin-bottom: -10em; } 

 .pull { /* Pull the text up over the image by this much: */ margin-bottom: -10em; /* Don't allow this container to be larger than the same amount: */ max-height: 10em; /* and hide any overflow, just to be on the safe side: */ overflow: hidden; } .pull::before { content: ""; display: block; padding-bottom: calc((30em - 100%) * 1000); /* Change 30em to your breakpoint */ } 

 .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; /* Gradient to make the text more legible: */ background-image: linear-gradient(to bottom, rgba(0,20,30,0) 0%,rgba(0,20,30,0) 50%,rgba(0,20,30,1) 100%); /* Extra .5% to prevent bleed due to rounding issues: */ height: 100.5%; /* Toggle gradient overlay at the same breakpoint as the 'pull': */ width: calc((30em - 100%) * -1000); /* Change 30em to your breakpoint */ max-width: 100%; } 

 <div class="outer"> <div class="inner"> <div class="item">...</div> ... <div class="control">...</div> </div> </div> ... 

 .outer { height: 2.25em; overflow: hidden; } .outer:target { height: auto; } 

 .inner { display: flex; flex-wrap: wrap; } 

 .control { height: calc((2.25em - 100%) * -1000); max-height: 2.25em; } :target .control--open { display: none; } :target .control--close { display: block; }