Статьи

Советы и рекомендации по разработке адаптивных сайтов

Январь 2, 2019

В последние годы мы наблюдали как рост мобильных устройств, таких как iPhone, так и широких мониторов. Адаптивные веб-сайты — это веб-сайты, которые могут адаптироваться к множеству различных разрешений экрана и всегда хорошо выглядеть. В этой статье я собрал советы и рекомендации по созданию адаптивных сайтов.

Начните с шаблона


Конечно, вы можете начать программирование с нуля, но есть много интересных бесплатных шаблонов, которые позволят вам сэкономить много времени. Среди прочего я рекомендую Мобильный шаблон , Сетка 1140 и Скелетон . Их гораздо больше, поэтому не стесняйтесь использовать Google «шаблон адаптивного веб-дизайна», если хотите больше.

Работа с макетами на основе жидкостной сетки


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

Чтобы получить размер в процентах от размера в пикселях, нужно взять ширину элемента и разделить его на полный размер сетки. Например: 200 пикселей (размер элемента) / 960 пикселей (размер сетки) = 0,2083. Умножьте это на 100, и вы получите 20,83%.

Вот почему интересно работать с сеткой 1000px. 1000 является круглым числом, и легко вычислить, что 24% этого размера будут равны 240 пикселям. Для получения дополнительной информации о сетках 1000px, я рекомендую вам проверить эту статью .

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

Очень важным аспектом адаптивного макета является то, как изображения могут адаптироваться к размеру их родительского контейнера. Основным решением является определение максимальной ширины 100%. Это гарантирует, что ваши изображения никогда не будут шире родительского контейнера.

.content img{
   max-width:100%;
}

Лучшее решение — использовать контекстно-зависимое изменение размера изображения. Этот метод в основном состоит из разных размеров изображения и отображения только размера, адаптированного к устройству. Быстрый пример:

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

И связанный CSS:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Для получения дополнительной информации об этой технике, проверьте эту статью .

JQuery твой друг

JQuery, безусловно, очень полезный инструмент, когда дело доходит до веб-разработки. Множество плагинов jQuery могут помочь вам создавать более отзывчивые сайты.
Быстрый обзор моих любимых:

  • FitText : плагин, который делает размеры шрифта гибкими.
  • Elastislide : отзывчивый плагин для карусели jQuery.
  • Supersized : полноэкранный плагин для создания слайдшоу фона.
  • FitVids : легкий и простой в использовании плагин jQuery для встраивания видео по ширине.

Не забудьте окно просмотра Apple

Тег <meta name = «viewport» «> был введен Apple для своих мобильных устройств (iPhone, iPad и iPod Touch). Этот тег позволяет указать размер страницы по умолчанию при просмотре на iPhone или iPad.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Приведенный выше код гарантирует, что при открытии ваш макет будет отображаться правильно в масштабе 1: 1. Масштабирование не будет применяться.

Для получения дополнительной информации, не стесняйтесь проверить документацию Apple developper .

Масштабируемые фоновые изображения

Спецификация CSS3 представила новый атрибут с именем background-size. Как вы, наверное, догадались, он используется для определения размера фоновых изображений. Это может быть размер в пикселях или некоторые зарезервированные ключевые слова. Ключевое слово cover масштабирует фоновое изображение (при сохранении исходных пропорций) настолько, насколько это возможно, чтобы область позиционирования фона была полностью покрыта фоновым изображением.

html {
	background: url(bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Вышеуказанное решение отлично работает в Chrome, Safari 3+, IE 9+, Firefox 3.6+ и Opera 10+. Если вы ищете решение, которое работает в старых браузерах, я настоятельно рекомендую использовать этот плагин jQuery или один из альтернативных CSS-твиков, опубликованных здесь .

Быть вдохновленным


При разработке веб-сайта всегда полезно быть вдохновленным тем, что сделали другие. С момента появления адаптивного веб-дизайна были созданы онлайн-галереи для демонстрации лучших адаптивных сайтов.

Самая полная галерея, безусловно, mediaqueri.es , но если вам нужно больше вдохновения, вы можете получить ее здесь или здесь .

Тестируйте, тестируйте, тестируйте и тестируйте снова!


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

Множество разных инструментов доступны для тестирования вашего сайта на экранах разных размеров. На данный момент моими любимыми являются, безусловно, ScreenQueri.es и изменить размер моего браузера .

35
Share: