ДНК отзывчивого веб-дизайна

Ниже приведен отрывок из нового документа «Анатомия отзывчивых приложений ASP.NET»,
изначально созданного Эдом Шарбено.

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

Отзывчивые строительные блоки

Адаптивный дизайн определяется как гибкие сетки, гибкий контент и медиа-запросы. В целом адаптивный веб-дизайн (RWD) означает, что макет проекта должен адаптироваться к размеру области просмотра браузеров. Содержимое приложения должно эффективно использовать доступное пространство на экране, как правило, благодаря возможности уменьшаться или увеличиваться при изменении размера контейнера. Давайте посмотрим, какие методы могут быть использованы для достижения RWD.

Медиа-запросы, краеугольный камень RWD

Медиа-запросы являются функцией CSS3, и без них адаптивный дизайн был бы невозможен. Медиа-запрос позволяет нам писать выражения, способные обнаруживать мультимедийные функции.

Медиа-запросы могут содержать тип медиа и / или выражения медиа-функции. Когда все части медиазапроса возвращаются true, стили в блоке медиазапроса будут применены к таблице стилей. Медиа-запрос аналогичен ifформулировке большинства основных языков программирования, за исключением того, что он разработан специально для обнаружения медиа.

Давайте рассмотрим пример и разберем различные части медиа-запроса.

/* For screens > 768px */

/*  If the device has a screen
    And the device width is greater than or equal to 768px
    then color property = red */

@media only screen and (min-width: 768px) { 
    .on-large { color: red; } 
}

/* Base style for small devices small and up */

.hero-text { font-size: 22px; }

/* For large and up */
@media only screen and (min-width: 768px) {
    .hero-text { font-size: 48px; }
}

<!-- Bootstrap syntax col-[device size: xs, sm, md, lg]-[width: 1-12] -->
<div class="col-sm-12"> ... </div>

<div class="col-sm-12 col-md-6 col-lg-4">
    <!-- some navigation -->
</div>
<div class="col-sm-12 col-md-6 col-lg-8">
    <!-- some content -->
</div>

/* bootstrap source code */
@media (min-width: 768px) {
    .col-sm-12 { width: 100% }
}

@media (min-width: 992px) {
    .col-md-6 { width: 50% };   
}

@media (min-width: 1200px) {
    .col-lg-8 { width: 66.66666666666666%; }
}

<div class="container">
    <!-- begin rows here -->
</div>

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/* Foundation Source Code */
img {
    height: auto;
    max-width: 100%;
}

<img class="img-responsive".../>

/* disable flexible images */
img.no-resize { max-width: none; }

<!-- Bootstrap -->
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>  

<!-- Foundation --> 
<!-- 16:9 aspect ratio -->
<div class="flex-video widescreen">
    <iframe src=..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="flex-video">
    <iframe src=..."></iframe>
</div>