Как изучить адаптивную и резиновую верстку?

Question

[hax0r :3]

Всем привет друзья! вот вроде как с горем пополам изучил CSS3 и HTML5, теперь у меня стоит вопрос как научиться верстать в % - резиновой верстки, я как то смотрел шаблон, там были такие огромные цифры например: width: 8.333333333%; - вот откуда они берутся? мне нужно это изучить, ну и конечно нужно изучить media запросы, вообщем друзья, помогите дайте какие нибудь ресурсы где лежат уроки.. желательно видео, спасибо большое))

Comments

[rinatoptimus]

В одном из видео от Loftblog как раз рассказывается, откуда берутся такие цифры (что-то про формулу Контекст/Результат * 100%). Название видео не помню, там в частности о том, как создавать свои адаптивные сетки. Название ролика что-то типа "Адаптивные сайты".

Answer 1

[y0u]

Ищется поисковиком!
Можете посмотреть мануалы по Bootstrap. Там быстро разберетесь в сетке. Параллельно будете смотреть в код и поймете, что такое media и как с ним работать.

p.s.: по поводу width: 8.3333%. Ширина экрана 100%. 100%/12 = 8.3333%. Думаю сами сделаете вывод, что это за ширина :)

Comments

[hax0r :3]

Спасибо! Я так понимаю ширина 8.3333% - это ширина одной колонки, если их всего 12? и каждый раз нужно умножать на 2 да?

[y0u]

syseN: да, ширина одной колонки. Если Вы хотите, к примеру, две колонки разместить в одну строку по всей ширине, это 100%/2 - 50%. Но в 12 колоночной сетке - это 49,99999%

[hax0r :3]

y0u: Спасибо, уже многое прояснилось, еще вот с медиа бы разобраться, ну и практически все)

[y0u]

syseN: если Вам помог этот ответ, помечайте как решение :)

[dpismenny]

y0u: По ответу все верно. Мне вот другое любопытно, чего многие просят помечать их ответы решением? За такие ответы тут доплачивают? :)

[y0u]

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

[dpismenny]

y0u: По крайней мере так задумывалось :)

Answer 2

[Андрей Федоров]

Маркотт И. - Отзывчивый веб-дизайн [2012, PDF, RUS]

Вот вам мануал. Как раз ваш случай...

Answer 3

[Пантелеймон Штанько]

у меня скорее встречный вопрос, почему столь высокое округление, почему не 8.3% вместо 8.333333333?