Новости Русского мира

Что дизайнеру стоит знать о адаптивном дизайне в вёрстке?

0 20


Чтобы не делать отдельные версии сайта для мобильных, планшетов и десктопов, используют адаптивный дизайн. С ним одни и те же страницы адаптируются к любой ширине окна браузера: от мобильных до экранов умных телевизоров.


Чтобы сделать страницы адаптивными, используют три техники: гибкую сетку, гибкие изображения и медиа-запросы.


Гибкая сетка



Основная идея — не использовать в сетке фиксированные значения в пикселях. Вместо этого стоит опираться на относительные единицы измерения (например проценты) и подстраивать отступы, минимальные и максимальные размеры блоков так, чтобы осмысленно и аккуратно заполнять всё доступное пространство.


Адаптируем макет с колонкой текста шириной в 400 пикселей:



Было
Стало


<style>
article {
  box-sizing: border-box;
  width: 400px;
  /*
  * Задаём внутренние отступы:
  * 8 пикселей сверху и слева,
  * 16 пикселей справа,
  * 24 пикселя снизу.
  */
  padding: 8px 16px 24px 8px;
}
</style>
<article>
  <p>
    Я великий комбинатор, идейный борец
    за денежные знаки.
  </p>
  <p>
    Кроме того, я знаю четыреста сравнительно
    честных способа отъёма денег.
  </p>
  <p>
    В городе Арбатове выдал себя за сына
    лейтенанта Шмидта и получил от председателя
    горисполкома небольшую материальную помощь.
  </p>
</article>





Гибкие изображения


Чтобы картинки растягивались на всю ширину, их делают «резиновыми»:



img {
  /*
  * Делаем изображения блочными элементами.
  */
  display: block;
  /*
  * Задаём максимальную ширину в 100%.
  */
  max-width: 100%;
  height: auto;
}





Чтобы при растяжении картинки выглядели хорошо, используют СВГ (если возможно) или картинки с двойным-тройным разрешением.


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


Медиа-запросы


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


Есть два подхода к таким перестроениям: «сначала десктопы» и «сначала мобильные». В первом случае сайт верстают для десктопов, а затем добавляют стилей, улучшающих его отображение на остальных экранах. Этот же подход используют в том случае, когда сайт уже свёрстан и нужна мобильная версия.


Адаптируем этажи портфолио из совета о каталогах и выдаче:



<style>
body {
  /* Задаём поля странице в 6% */
  padding: 3% 6%;
}

/*
* @media — медиа-запрос,
* screen and (...) — условие,
* при котором стили внутри медиа-запроса
* начнуть работать.
*
* В данном случае у body поменяются поля,
* когда ширина окна станет меньше 768 пикселей.
*/
@media screen and (max-width: 768px) {
  body {
    padding: 1% 2%;
  }
}

.row {
  /* .row — флекс-контейнер, этаж портфолио. */
  display: flex;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .row {
    /*
    * На узких экранах переносим не поместившиеся
    * проекты на следующую строку.
    */
    flex-wrap: wrap;
  }
}

.project {
  /*
  * .project — флекс-элемент, карточка проекта.
  * Будет занимать в два раза больше места,
  * чем описание проекта.
  */
  flex: 2;
  padding-right: 10px;
}

.project-caption {
  /* .project-caption — описание проекта. */
  flex: 1;
  padding-right: 10px;
}

.project:last-child,
.project-caption:last-child {
  /*
  * У последней подписи или проекта
  * убираем правый отступ.
  */
  padding-right: 0;
}

/*
* На узких экранах растягиваем проекты
* и подписи на всю ширину
* окна и перенастраиваем отступы.
*/
@media screen and (max-width: 768px) {
  .project,
  .project-caption {
    min-width: 100%;
    padding: 0;
    margin-bottom: 10px;
  }

  .project:last-child,
  .project-caption:last-child {
    margin-bottom: 0;
  }

  /*
  * Перемещаем подпись наверх.
  */
  .project-caption:last-child {
    order: -1;
    margin-bottom: 10px;
  }
}
</style>

<div class="row">
  <div class="project">
    <div class="project-image">
      <img
        src="http://su.epeak.in/wp-content/uploads/2017/10/1507829869_342_что-дизайнеру-стоит-знать-о-адаптивн"
        width="1000"
        height="500">
    </div>
  </div>
</div>

<div class="row">
  <div class="project">
    <div class="project-image">
      <img
        src="http://su.epeak.in/wp-content/uploads/2017/10/1507829870_907_что-дизайнеру-стоит-знать-о-адаптивн"
        width="800"
        height="800">
    </div>
  </div>

  <div class="project">
    <div class="project-image">
      <img
        src="http://su.epeak.in/wp-content/uploads/2017/10/1507829870_200_что-дизайнеру-стоит-знать-о-адаптивн"
         width="850"
         height="850">
    </div>
  </div>

  <div class="project-caption">
    <p>
      Прак­ти­че­ское руко­вод­ство для мене­дже­ров
      и стар­та­пе­ров
    </p>
  </div>
</div>




Прак­ти­че­ское руко­вод­ство для мене­дже­ров
и стар­та­пе­ров

В отдельном окне



В подходе «сначала мобильные» начинают с мобильной версии и улучшают её с увеличением доступной ширины экрана.


Адаптируем пост в блоге:



Порастягивайте окно и посмотрите, как меняется текст и его ширина


<style>
body {
  /*
  * Задаём поля странице.
  */
  padding: 1% 2% 3% 1%;
}

/*
* У body увеличатся отступы, когда ширина
* окна станет больше 768 пикселей.
*/
@media screen and (min-width: 768px) {
  body {
    padding: 3% 6% 9% 3%;
  }
}

body {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 22px;
}

h3 {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 .05em 0;
}

p {
  margin: 0 0 .88em 0;
}

/*
* На экранах с шириной
* более 960 пикселей,
* ограничиваем максимальную ширину
* текста, ставим его по центру
* и увеличиваем кегль.
*/
@media screen and (min-width: 960px) {
  article {
    max-width: 840px;
    margin: 0 auto;
  }

  h3,
  p {
    font-size: 20px;
    line-height: 27px;
  }
}
</style>
<article>
  <h3>Конец «Вороньей слободки»</h3>
  <p>...</p>
  <p>...</p>
</article>


Что дальше





P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.






Source link

Comments
Loading...