Начинаем осваивать адаптивную верстку

наверх

Здравствуйте, уважаемые читатели!

Наконец-то я решил начать освоение адаптивной верстки.

Сегодняшняя статья будет небольшим введением в новое направление развития web-дизайна.

Итак, что такое адаптивная верстка?

Википедия говорит:

«Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.»

Благодаря адаптивной верстке сайт будет качественно и удобно отображаться на разных устройствах, таких как:

персональные компьютеры
ноутбуки
планшеты
смартфоны и других.

С каждым днем адаптивная верстка становится все популярней. Адаптивных сайтов появляется все больше и больше.

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

Приступим!

Начало

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

HTML

<div>
    <img src="../images/1.jpg">
</div>

Предельно просто. Всего лишь обернули изображение в контейнер.

CSS

div {
    width: 100%;
    text-align: center;
}
div img {
    width: 100%;
    height: auto;
}

Мы задаем ширину изображению, равную ширине контейнера div. Благодаря этому, если уменьшается div, то уменьшается img.

В итоге мы получили изображение, которое растягивается на весь экран, будь-то экран 320*240 пикселей или экран с разрешением 1920*1080 пикселей.

Демонстрация

Максимальная и минимальная ширина

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

Чтобы решить данную проблему зададим изображению определенную максимальную и минимальную ширину.

CSS

div {
    margin: 0 auto;
    width: 1000px;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
div img {
    max-width: 100%;
    height: auto;
}

Теперь контейнер, а следовательно и изображение будут изменяться в разумных пределах от 500 до 1000 пикселей по ширине.

Демонстрация

Фотогалерея

А теперь попробуем создать минигалерею.

Будем использовать уже известные нам принципы.

HTML

<div class="image_gallery">
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    <div>
        <img src="../images/3.jpg" title="Озеро"  />
    </div>
    <div>
        <img src="../images/4.jpg" title="Райский остров"  />
    </div>
</div>

В HTML мы лишь добавили несколько изображений и завернули все в один div.

CSS

div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 48%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Каждое изображение в галерее теперь будет изменять свой размер в зависимости от контейнера. Так же мы добавили небольшой отступ по 1% с каждой стороны для красоты.

Демонстрация