Несколько вопросов по адаптивному дизайну

SeriousSem · November 26, 2012

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

1. Для мобильных устройств шаблон верстается отдельно? (другая разметка, уменьшенные картинки)

2. Какой оптимальный размер выбирать для картинок background-image тела сайта?(у меня к примеру они 968px)

3. Как выбирать процентное отношение размера для самого главного контейнера (<div id="container">), точнее относительно чего берется это отношение? Просто вычитал, что уже внутри блок берется соотношение размера нужного блока до размера блока, в котором находится нужный нам блок.

Пример кода:

html


<html>
  <head>
    ... 
  </head>
  <body>
    <div id="container">
      <header>
        <div id="logo">
          <div id="logo-img"></div>
          <div id="logo-text"></div>
          <div id="search"></div>
        </div>
      </header>
      <div id="content-body">
        <div id="content"></div>
        <div id="right"></div>
      </div>
    </div>
  </body>
</html>

Vadimka · November 26, 2012

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

2) оптимальный вариант любой. тут ещё такая фишка, зашли на твой сайт с экрана 1024 и выше то ему у body одна картинка, зашли с 320 до 640 ему меньше бэкраунд картинка.ты просто выбираешь например три размера картинки, под большие дисплеи компов, под средние планшетов и мелкие - телефоном. и в зависимости от экрана они у тебя будут меняться на бэкгроунде.

3)процентное отношение всегда берётся относительно родтеля если параметр posinion не absolute. то есть если у тебя этот див находится только внутри body то отношение относительно его, если он внутри ещё одного контейнера то относительно его.

и вообще почитай тут ещё, пригодится

http://www.cmsmagazine.ru/library/items/graphical_design/build-responsive-site-week-designing-responsively-part-1/

http://www.cmsmagazine.ru/library/items/graphical_design/build-responsive-site-week-designing-responsively-part-2/

http://www.cmsmagazine.ru/library/items/graphical_design/build-responsive-site-week-images-and-video-part-3/

Yazon_Nile · November 26, 2012

Автор,

если коротко

1. Верстаешь обычный дизайн (width flexible)

2. Для таб и моб- версий допиливаешь стили - переопределяя.

Типа так

#big-banner{/* some styles */}


@media only screen and (max-width:320px){
    #big-banner{display:none;} /* на телефонах он не нужен */
}

И так далее. Положение блоков, размеры шрифтов..

SeriousSem · November 27, 2012

Спасибо за советы! Еще хотел спросить: как по максималу уменьшить вес картинок шаблона? И если я хочу для body задать фоновую картинку, то какой для её оптимальный размер?

Sign In

Несколько вопросов по адаптивному дизайну

Question

SeriousSem

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Vadimka

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

SeriousSem

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information