Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Адаптивная верстка 5 лет спустя / Сергей Кузнецов (AGIMA)

РИТ++ 2017, Frontend Conf
Зал Конгресс-холл, 5 июня, 10:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2602.html

Мы в AGIMA одними из первых начали заниматься адаптивной версткой в России. Набили миллион шишек и провели сотни исследований. Многие вещи, которые раньше были невозможны, в принципе, сейчас делаются в одну строку. В своем докладе я хочу рассказать о том, какой путь прошла концепция адаптивного дизайна, какие сложности есть сейчас, как с ними бороться и какие прикольные фишки появятся в ближайшем (и не очень) будущем.
...

  • Be the first to comment

  • Be the first to like this

Адаптивная верстка 5 лет спустя / Сергей Кузнецов (AGIMA)

  1. 1. <style> td:before { content: attr(data-label); } </style> <table> <tr> <th>Last name</th> </tr> <tr> <td data-label="Last name">Ivanov</td> </tr> </table>
  2. 2. • Оптимизируем видео и изображения • Упрощеаем или отключаем анимации • Используем векторный формат изображений • Сохраняем пропорции видео и изображения
  3. 3. Задаем пропорции . ratio-wrapper { position: relative; height: 0; padding-bottom: 56.25%; /*16:9 для этого соотношения (9/16=0,5625)*/ } . ratio-wrapper__content { position: absolute; max-width: 100%; height: auto; }
  4. 4. CSS в начале JS в конце, либо используем атрибут defer Mobile first
  5. 5. • Проверяем является ли устройство сенсорным • При необходимости убираем зум и скролл • На мобильных устройствах click эвент не вызывается пока не пройдет 300мс • Jquery не лучший выбор для поддержки событий
  6. 6. Скролл с инерцией {-webkit-overflow-scrolling: touch } Для Safari (iPhone / IPod / IPad) и Android

×