16 комментариев

  1. Нян
    18 марта 2015

    Спасибо, хорошо объяснили про колонки

    Ответить

  2. Jentoss
    20 июня 2015

    Класс!

    Блин очень круто, спасибо!

    Ответить

  3. Oleg
    31 июля 2015

    Все хорошо Вы описали. Но это все лучше отнести к резиновому дизайну, а не к адаптивному.

    В том то и смысл чтобы на мобильных показать совсем другие изображения.

    В css через backgraund-image и CSS media queries это делается легко, но в таком случае картинка при плавному уменьшении ширины браузера меняется скачками (в зависимости от того, сколько изображений мы подготовили).

    Если же вставлять картинки с помощью тега как здесь описывается, то как менять картинки для разных разрешений? С помощью JS получить ширину девайса, передать из JS в PHP значение ширины девайса (перезагрузка страницы) и выводить нужную картинку с помощью HTML и PHP.

    Либо же в HTML выводить несколько изображений, а через CSS скрывать ненужные из них с помощью CSS media queries. Но в этом случае грузятся лишние картинки...

    Ответить

    • driver
      1 августа 2015

      Если исходить из терминологии, макет представленный в статье ближе к отзывчивому % + media-queries</code. Сам подход основан на резиновых макетах, медиа-запросах и отзывчивых («резиновых») медиа-элементах (изображения, видео). Адаптивный макет <code>px + media-queries, как раз таки при этом типе верстки страница «прыгает» по контрольным точкам, смещаясь и адаптируя контент каждый раз к наиближайшей следующей из них.

      Чистая «резина» использует для элементов относительные показатели %

      Вы же описали стратегию прогрессивного улучшения адаптивного дизайна, использующей стилизацию CSS и дополнительные скрипты JavaScript

      % + media-queries + %-media + JavaScript + magic

      Так что соглашусь с вами, данное решение всё же ближе к отзывчивому типу макетов страниц, который в отличие от адаптивного основывается на принципе «резины». Ну, а в заголовке статьи просто устоявшаяся подмена понятий

      Ответить

  4. Андрей
    13 сентября 2015

    А если изображение маленькое и без атрибутов ширины и высоты? Тогда как? Оно увеличивается на всю ширину дива...

    Ответить

    • driver
      13 сентября 2015

      Соответственно, так как базовая ширина задана в width: 100%;

      В данном случае размер предопределяется с помощью свойства max-width:

      Ответить

  5. Шурик
    2 февраля 2016

    А что будет с картинками, у которых высота больше чем ширина? 😉

    Ответить

    • driver
      2 февраля 2016

      Попробуйте и всё узнаете ))

      Ответить

  6. Юлия
    28 марта 2016

    Нужно поставить два лого по краям экрана. Шаблон адаптивный. То есть нужно, что бы на маленьких устройствах лого выводились одно под другим. Подскажите как можно это реализовать? Конкретнее как реализовать отображение двух адаптивных картинок по краям большого экрана? Как то так )))

    Ответить

    • driver
      28 марта 2016

      Если совсем уж по-простецки, то примерно так: см. пример в редакторе изменяйте размер поля просмотра: тынц

      Ответить

  7. DeniSTAR
    13 августа 2016

    Спасибо!

    Наконец-то нашел то, что нужно!

    Самая изящная идея. Никакой воды. Всё только по существу. Просто, доступно и понятно.

    Теперь с таким инструментом и сайт будет красиво выглядеть, благо и в CSS лишь немного дополнений ввести останется и привести его к большей логике. А то поначалу, задумавшись о кросс-браузерности, боялся, что несколько типов сценариев и файлов CSS придется делать. Теперь — на одну головную боль меньше.

    Еще раз Спасибо!

    Ответить

  8. Hosilov
    20 августа 2016

    Здравствуйте. У меня вопрос : можно ли всё это сделать на вап ?

    Ответить

  9. Игорь
    7 октября 2016

    А как сделать на одной странице одно изображение адаптивным, адругие фиксированными??? Буду признателен...

    Ответить

  10. Дмитрий
    2 декабря 2016

    Добрый день.

    А как сделать так, чтобы не было промежутков между картинками в случае условной расстановки?

    Ответить

    • driver
      2 декабря 2016

      Используйте отрицательное значение margin, для всех вариантов, в том числе и для условной расстановки будет примерно так:

      img { width: 100%; height: auto; margin:-3px; }

      Ответить

      • Дмитрий
        3 декабря 2016

        Как вариант. Спасибо.

        Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *