Разработка уникального дизайна сайтов. Профессиональный подход!

Адаптивный дизайн сайта

/ Сергей Нуйкин / Веб-дизайн



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

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

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

А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

адаптивный дизайн сайта Основные принципы адаптивного дизайна:

  • Адаптивный шаблон сайта, способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
  • Адаптация и перемещение блоков контента, способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
  • Адаптация изображений, способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
  • Использование гибкой сетки, позволяет максимально быстро изменять конструкцию макета;
  • Скрытие менее важных блоков, на небольших экранах некоторые блоки могут скрываться;
  • Переработка юзабилити элементов навигации, так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
  • Упрощение ряда элементов на веб — странице, некоторые элементы упрощаются для использования на мобильных устройствах;
  • Адаптация видео контента, также следует учесть и адаптацию видео;
  • Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
  • Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.

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

Размеры макетов адаптивного дизайна

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

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

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

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

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

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport. Данный метатег прописывается в <head> сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

<meta name="viewport" content="name=value, name=value"

Рекомендуется записывать следующим образом:

<meta name=viewport content="width=device-width, initial-scale=1.0 ">
  • width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
  • initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

viewport

Слева без мета-тега, справа с использованием мета-тега  viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли  условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

@media screen and (max-width: 1000px) {
.class {
свойство: значение;
}
}
  • @media – медиа – запрос;
  • screen – медиа – тип (также называют тип носителя);
  • max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
  • .class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

В большинстве случаев для разработки адаптивного дизайна используются следующие медиа — функции.

  • max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
  • min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

Значения, которые используются в медиа — функциях называют также  breakpoints (переломные или контрольные точки). В этих контрольных точках как Вы догадались, и меняется дизайн сайта.

  • 320px — мобильные
  • 480px — мобильные
  • 768px — планшеты
  • 1024px — планшеты, нетбуки
  • 1280px и более — персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

  • and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
  • not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
  • only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

Как сделать адаптивный дизайн сайта из фиксированного макета

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

  1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
  2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
  3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

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

Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper {max-width: 960px;} оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Размер контейнера (px) / размер основного контейнера (родителя) в (px) * 100% = результат (%)

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% . адаптивный дизайн сайта как сделать верстка адаптивного сайтаТаким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Размер шрифта (px) /16px (стандартный размер) = размер шрифта (em)

Например, размер шрифта 32рх, тогда 32/16=2em. адаптивная верстка шрифтыПосле чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

img{
max-width:100%;
height: auto;
}

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

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

Ну, вот наша с вами основа готова, теперь необходимо определить контрольные точки, в которых макет будет перестраиваться, продумать, как будут вести себя блоки, что будем скрывать и записать это все в медиа – запросы. Определять эти самые переломные точки мы будем при помощи браузера google chrome.

Откроем в нем наш макет, нажмем клавишу F12 и будем уменьшать размер окна браузера. В верхнем правом углу у нас будут писаться размеры окна, нас интересует первое значение, оно указывает на ширину. Необходимо сжимать до тех пор, пока дизайн не перестанет корректно отображаться. В том размере, когда макет выглядит не корректно, мы и будем создавать контрольную точку. адаптивная верстка размер окнаОпределив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

@media only screen and (max-width: 910px){
/* контентную часть мы делаем во всю ширину, отменяем выравнивание*/
section {
width: 100%;
float: none;
}
/* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/
aside{
width: 100%;
float: none;
}
}

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%;  тогда ширину запишет следующим образом width: 96%;.

Таким образом, мы адаптировали наш макет на разрешение меньше 910px. Если окно браузера будет меньше 910px, то контент станет во всю ширину, а сайдбар отпустится под контентную часть и станет также во всю ширину.

По такому же принципу мы создаем и остальные контрольные точки, находим ширину, при которой макет ломается (смотрится не корректно) записываем медиа – запрос, формируем для него стили задаем ширину блоков, можем скрыть менее важные блоки (display: none).

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

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

Ну, вот вроде и все что хотел рассказать в этой статье, хотел написать немного об адаптивном дизайне, а получилось довольно объемно, надеюсь, материал будет вам полезен.

Понравилась статья?
Подпишитесь на обновления сайта:


Поделитесь статьей с друзьями:

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

Комментарии к статье:
    • Руслан Ахтамьянов:

      Отличная статья получилась, Сергей! А самое главное мегаполезная и суперактуальная! Спасибо большое за такой ценный материал.

    • Сергей Нуйкин:

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

    • Денис:

      Привет! Статья очень полезная, особенно в свете того что с апреля Google будет лучше ранжировать Mobile Friend сайты. Много раз уже собирался этим заняться, но так и не сложилось. Надо попробовать, надеюсь получится ;-)

    • Сергей Нуйкин:

      Привет, Денис! Именно Google своими событиями и сподвиг на написание статьи. Первым делом переработал свою тему, сделав ее адаптивной, правда, остались еще кое какие мелочи, но это позже. В основном изложил, на что следует обратить внимание и что пригодится в разработке адаптивного сайта.
      Попробуй конечно, должно получиться, я тоже очень долго откладывал, то работа, то лень, то долго думал как подступиться, изучал различные материалы. А недавно google прислал письмо, что сайт не оптимизирован для мобильных устройств, вот тогда уже жестко решил переработать свою тему. ;-)

    • Денис:

      А сколько по времени ушло на переделку? У тебя хорошо получилось, пробовал менять размер окна — все подстраиватся, отличный результат!

      Правильно я понимаю, что адаптивность реализуется только средствами CSS, сам шаблон менять не нужно?

    • Сергей Нуйкин:

      Точно Денис сказать не могу, отвлекался на другие задачи, но не больше недели, долго искал решение для выпадающего меню, не хотелось скрипты цеплять, сделал, вроде все работает. Возможно, в старых браузерах и есть лаги, но без этого никуда. Если что вылезет, как говорится, будем править по ходу.
      Да ты все верно понял, адаптивность реализуется средствами css.

    • allemiko:

      Привет, Давно тут не был :-) , А я вот на новый диз cкоро буду переходить, адаптивный), пробовал свой старый адаптировать — но в нем слишком много лишнего кода было, не разобрался :-)), перекосил все. У меня еще есть вопрос, как максимально оптмизировать код, можешь совет дать?, я вот в шаблоне пояснения всегда делаю, это влияет на размер страницы?

    • Сергей Нуйкин:

      Алем, привет! Да я заметил, что ты давно не заглядывал, ничего бывает, рад, что сейчас заглянул. У меня тоже время не было посты писать, пока работа пока перерабатывал сайт.

      Ты новый дизайн сам разрабатываешь, или готовую тему подыскиваешь?

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

      По поводу комментариев в коде, да они увеличивают вес страницы конечно но для последующих правок удобнее, и их влияние на загрузку я не думаю что велико. Я лично делаю комментарии. А так если, к примеру, оптимизировать css то комментарии удаляются селекторы со свойствами и значениями прописывают в строчку, селекторы с одинаковыми свойствами и значениями объединяют и так далее.

    • allemiko:

      Для своего Диза мне далеко,нарисовать то фигня — а вот сверстать это проблема, поэтому полностью перерабатываю тему ZeeMinity :-) , спасибо за советы — пригодится, особенно про скрипты и селекторы, незнал что можно еще их обьединять, нужно еще микроразметку новую вводить — изучаю потихоньку :-)

    • Сергей Нуйкин:

      Я тоже вот сижу сейчас и про микроразметку изучаю, думаю вводить или не париться. :)

    • Максим:

      Сергей, привет. Отличная статья. Всё понятно без заморочек. Ты обратил внимание на тонкость, о которой многие даже не пишут (процентное соотношение ширины и про шрифты). Этот момент реально нужно учитывать.
      Спасибо тебе за советы по доработке моего нового шаблона. В отчёте многие высказали своё мнение, всё принял к сведению и теперь начну доработку. ;-)

    • Сергей Нуйкин:

      Максим, привет! Постарался максимально понятно дать информацию по адаптивности, и включить только важное.
      Я понимаю, тоже бывает, вношу какие-то правки или расширяю функционал, а самому не всегда правильно можно оценить. Тут главное выбрать в действительности по оценке мнений, что важно, а что можно и опустить.

    • Максим:

      Согласен, узнать мнение о своём творении очень полезно. К тому же мне проще техническую часть реализовать, а вот дизайн — дело тонкое. Нужно со вкусом проработать :smile:

    • Сергей Нуйкин:

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

    • Максим:

      А вот это точно, расписываться в своей беспомощности — заведомо проигрышный результат. Конечно, нужно брать и делать. Не получается лишь у того, кто не делает. Я ещё это говорил своим ученикам, когда вёл компьютерные курсы.
      Сергей, ещё раз спасибо за помощь. Удачи тебе!

    • Сергей Нуйкин:

      Пожалуйста, Максим! И тебе удачи!

    • Pocherk:

      Проще освоить Bootstrap и на нем делать адаптивные дизайны. Я давно им пользуюсь и «доволен как слон». :!:

    • Сергей Нуйкин:

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

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

    • Константин Кирилюк:

      По моему, это очень даже хороший минимум, который нужно знать при желании создания адаптивного дизайна. Всё пошагово и по существу. Но важно также понять и то, что адаптивный дизайн – это не просто подгонка под размеры экрана устройства. Тут нужно признать, что отдельная мобильная версия – гораздо проще в реализации.

    • Сергей Нуйкин:

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

      Мне лично это не нравится, а если бы был адаптив то было бы просто перестроение блоков.

    • Павел:

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

    • Сергей Нуйкин:

      Павел, здравствуйте! По-хорошему желательно перевести все, но не обязательно. Те величины, которые вы не измените, будут фиксированными, а те что измените на % будут меняться в зависимости от экранов устройств. Нужно смотреть по верстке как блоки и элементы ведут себя при разных размерах экранов и на разных устройствах.

    • Павел:

      Добрый день, Сергей. Спасибо за ответ. У меня тема перерисована заново, так сказать — эксклюзив. Я имел ввиду, что нужно изменять не только ширину контейнеров и размер шрифта, но и размеры всех линий. Но, как я понял, никакого риска нет в том, чтоб менять в файле стиля css, величины в пикселях на проценты и ем? Грубо говоря, всё делается методом подбора?

    • Сергей Нуйкин:

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

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

    • Павел:

      Приветствую, Сергей. Доделал сайт, всё, конечно при желании реально, но с линиями возиться оказалось обязательно. Подогнал конкретно под все размеры и практически все браузеры (осталось для мозиллы немного подкорректировать). Так что, как говорится — терпение и труд, всё перетрут. Спасибо за участие.

    • Сергей Нуйкин:

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

    • Максим:

      Здравствуйте. Я учился адаптировать дизайн сайта на простом примере. У меня каркас из таких блоков: шапка, 2 сайдбара по бокам, подвал, и область контента с 4 блоками (на их месте могли бы быть, например, картинки).

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

      Если потребуется, могу выслать файл с кодом.

    • Сергей Нуйкин:

      Здравствуйте, Максим! Да, медиа-запрос производит адаптацию в зависимости от прописанных в нем условий. Как я понял у Вас вместо версии для ПК отображается адаптированная к примеру под планшет? Если да то все дело скорее всего заключается в том что вы сделали ошибку в условие медиа-запроса (max-width, min-width).
      Посмотрите, если не получится пришлите исходники на почту, она указанна на странице контактов.

    • Роман:

      Просто идеальная статья :o
      Лучшее, что нашел на просторах интернета по адаптивному дизайну :twisted: :twisted: :twisted:

    • Сергей Нуйкин:

      Спасибо за комментарий, Роман! Приятно слышать хорошие отзывы о статье.

    • Артём:

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

      Но, скажите пожалуйста…Как я уже говорил, целый день убил на теорию. Но в разных информационных ресурсах встречаются разные понятия: адаптивная верстка, резиновая, отзывчивая и т.д. Что, в следствии, внесло некоторую путаницу в мою голову. Сергей, вопрос таков: какие Вы бы выделили основные виды понятий, связанных с типами верстки дизайна и каково их существенное отличие? Еще раз спасибо большое!

    • Сергей Нуйкин:

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

      Понятия отзывчивый дизайн, резиновая верстка входят в более широкое понятие которое называют адаптивный веб-дизайн.
      Адаптивный дизайн состоит из таких основных технологий как responsive design (отзывчивый дизайн), mobile first (мобильный в первую очередь), progressive enhancement (прогрессивное улучшение).
      Отзывчивый дизайн — это более раннее понятие и оно включает в себя три технологии это media queries (медиа-запросы), flexible media (гибкие изображения, видео и т.д.) и fluid grid (изменчивые сетки (резиновая, гибридная (резиновая + фиксированная))).

      Что касается верстки.
      Я выделяю несколько видов верстки адаптивных макетом:
      Резиновая (гибкая) когда все значения блоков и отступов прописываются в % а шрифты в em.
      Гибридная (резиновая + фиксированная).
      На основе системы сеток такой принцип используется на фреймворках к примеру на bootstrap.

    • Павел:

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

    • Сергей Нуйкин:

      Павел все дело в html — разметке.

    • Олег:

      Спасибо, Сергей за замечательную статью! Сегодня просмотрел полтора десятка сайтов со статьями об адаптивной верстке (дизайне). Ввело в заблуждение слово «дизайн», так как я начал разрабатывать проект в Photoshop и не мог срастить в голове как же это все в нем сделать (Я начинающий). Действительно в интернете много мнений по этому вопросу, в том числе и про разработку нескольких макетов для различных разрешений экрана. Ваш пример переверсткой сайта с фиксированным размером в адаптивный прояснил и сориентировал меня. Еще раз спасибо за замечательную статью.

    • Сергей Нуйкин:

      Очень рад, Олег что статья оказалась вам полезна. Зачастую когда начинаешь разрабатывать что-то впервые, всегда много вопросов и недопонимания.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: