При верстке адаптивного сайта по мере его верстания всплывают некоторые моменты — подводные камни, с которыми рано или поздно придется столкнуться. Статья написана без логики, так сказать в боевом состоянии.

Первый камень

Когда полным ходом идет верстка, многие просто проверяют адаптив, путем изменения размера окна браузера. Там как правило все хорошо работает, особенно хорошо если это Хром. Но, когда берем в руки телефон или планшет, то тут и появляются сюрпризы.

На планшетах и телефонах страницы отображаются в виртуальном окне, обычно это окно шире экрана, это сделано для того, что бы пользователи могли свободно перемещаться по страницам сайта не адаптированного под мобильное устройство. Поэтому нам нужно сказать браузеру, что мы будем контролировать размер окна просмотра и масштаб страницы. Для этого указываем мета-тег:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">

Второй камень

Всеми любимый Enternet Explorer и его версии. Мета-тег X-UA-Compatible позволяет  задать значение content, которое отображает различные версии Internet Explorer в том или ином режиме. Значение IE=edge заставляет браузер переходить в последний доступный стандарт независимо от DOCTYPE.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Третий камень

box-sizing — Применяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.
Собраны все возможные блоки к которым можно применить box-sixing

html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, input 
{ 
   margin: 0; 
   padding: 0; 
   border: 0; 
   box-sizing: border-box; 
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;
}

Четвертый камень

При использовании в верстке flex есть множество тонкостей, например, для того чтобы в блоке выровнять текст по вертикали, нужно родительскому классу указать margin: 0; , а дочернему margin: auto;

.bt_content{
    display: flex;
    margin: 0;
 }

 .bt_text{
   margin: auto;
 }

<div class="bt_content">
   <div class="bt_text">Текст</div>
</div>

Пятый камень

Кроссбраузерность для flex. Не все браузеры корректно работают с флексом для совместимости используют специальные префиксы:

display: -webkit-box; /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UC Browser Android */ 
display: -moz-box; /* Firefox 2 - 27 (2009 Spec), UC Mini */ 
display: -ms-flexbox; /* IE10 (2012 Syntax) */
display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */ 
display: flex; /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */

Но есть один случай, когда не спасают префиксы, если родитель флекс,
а дочерний элемент тег <a> в котором размещают изображение, и для указания высоты используется padding-top: 20%, то в некоторых браузерах высота просто не сработает, нужно <а> обернуть в <div>  и переназначить стили отвечающие за ширину и позиционирование.

Вид после обертки:

<div class="bt_promoban_block">
   <div class="bt_promoban_bl">
     <a class="bt_promoban_link" href="<?=$href?>" style="baground-image: url(<?=$img?>)"></a>
   </div>
</div>

.bt_promoban_block{
    display: flex;
     width: 100%;
 }

.bt_promoban_bl{
    position: relative;
    width: 50%;
 }

.bt_promoban_link{
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
 }