HTML5 + респонзив верстке Пара вопросов?

Question

[Rudy Dudy]

Здравствуйте
За время изучения накопилось пару вопросов. Если поможете разобраться в них - буду вам очень благодарен.
1. Прочитал разные статьи, посмотрел разные видео так и не понял - с выходом на нового стандарт HMTL5 есть ли для старого: div class="wrapper"/"container" тэг в html5? Видел разные люди пишут и говорят по разному - одни пишут section, другие main, а некоторые и дальше пишут как раньше. Так все же есть ли стандарт в html5? Хотел бы для себя закрыть этот вопрос.

2.Сейчас изучаю технологию респонзив дизайна, есть много вопросов, но пожалуй задам самые важные:
Как я понимаю ( надеюсь верно ) для респонзив - нужно ( не считая гибких медия и медия запросов ) статическую верстку перевести в относительную ( % и em ) Вот есть одностраничка вся разметка статическая - px. Для того что бы перевести статическую в резиновую нужно взять контекст/на цель * 100 = нужные нам %. Из этого выплывает вопрос:
Имеем контейнер с шириной 960 px как правильно перевести контейнер с статического в резиновый? цель(960) делим на что именно? На родитель - body? То есть на всю ширину экрана? или как?
Я делал методом тыка - открывал инструменты разработчика в браузере и в Computed подгонял % пока не будет показывать 960 px. Считается ли это верным решением? Или может есть какие-то скрытые нюансы в этом?

Как быть с отступами? padding, margin и т.д - они задаются в px - или их тоже нужно перевести к относительной величине? Если да тогда как?

За ранее спасибо.

Answer 1

[Котик Антон]

1. <main> скорее всего может быть заменой для того, что вы понимаете под div class="wrapper"/"container", если вы готовы следовать его ограничениям:

Authors must not include more than one main element in a document. Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

2. Прочитайте Отзывчивый веб-дизайн, Итан Маркотт, большая часть вопросов должна отпасть.

цель(960) делим на что именно?

Нужно понимать, что при резиновой вёрстке это 960px будут сжиматься/растяшиваться в зависимости от размера окна браузера. Вы должны решить, при каком размере окна, контейнер будет иметь размер ровно 960px. Например, вы решили, что при 1280px - это и есть контекст. Тут я несколько упрощаю, т. к. нужно понимать, что контекст - это не всегда размер кона браузера (body).

Дальше считаем, делим цель на контекст, а не наоборот, как вы написали: 960 px / 1280px * 100% = 75%

Comments

[Rudy Dudy]

Сразу спрошу - как можно на тостере комментировать определенный выделенный текст? А то я новенький тут=)
" Вы должны решить, при каком размере окна, контейнер будет иметь размер ровно 960px. Например, вы решили, что при 1280px - это и есть контекст. " Я понял Вас, большое спасибо. Ещё маленький вопросик - А существует какой-то стандарт? Ну припустим 1980px это и есть контекст, или это все относительно, и как такого стандарта нету, и все зависит от проекта и данной ситуации?

[Котик Антон]

Zen Ter: Оборачивать в теги <blockquote>...</blockquote>. Стандарта нет.