Каким образом лучше перевести из «резинового» шаблона в адаптивный?

Question

[RGoldvarg]

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

Вопрос. Каким образом лучше адаптировать шаблон под эти устройства? "Курить" в сторону фреймворка, по типу бутстрэпа или фаундейшина?

Или же медиа-запросами добавить стили для определенных разрешений? Сайт сверстан по сетке 1150px, и отображается корректно и качественно исключительно на больших разрешениях...

Глаза разбегаются от потока информации...

Я прекрасно знаю правило ширина цели/контекст = результат. Попробовал перестроить в процентном соотношение макет под 1150px, на широком экране 1920x1080— все ок, если слегка сжимать — шаблон разъезжается.

Можно ли оставить стандартное значение шаблона в пикселях, а для доп.разрешений задавать медиа-запросами в процентном соотношении?

Answer 1

[andreyqin]

Если сайт уже сверстан, то фреймворк вам вряд ли поможет, адаптивность нужно будет делать при помощи media-запросов. Запросы должны идти в порядке убывания. Могу предложить такой вариант:

@media screen and (max-width: 1024px) {
    /* Стили для разрешения 1024px и ниже */
}
@media screen and (max-width: 768px) {
    /* Стили для разрешения 768px и ниже */
}
@media screen and (max-width: 600px) {
    /* Стили для разрешения 600px и ниже */
}
@media screen and (max-width: 480px) {
    /* Стили для разрешения 480px и ниже */
}

Верстка под данные разрешения покроет львиную долю мобильных устройств. При разрешении 1024px и ниже делаете сайт резиновым. Округляйте полученные значения при подсчете ширины, чтобы было удобно. И не забывайте, что в общую ширину входят еще внешние и внутренние отступы, либо используйте правило box-sizing: border-box. Если внимательно следить за шириной, то ничего разваливаться не будет.

Comments

[Виталий Киренков]

Как по мне, так - box-sizing - зло...

[andreyqin]

@DeLaVega, почему же? Я сам не пользуюсь, но считаю, что иногда это действительно удобно.

[Виталий Киренков]

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

[andreyqin]

@DeLaVega, ну, если вы верстаете под IE 6-7, то возможно. А так значение border-box поддерживается всеми популярными браузерами.

[RGoldvarg]

Спасибо большое! Подскажите, пожалуйста. А отступы, которые были заданы в пикселях — по какой формуле вычисляются в процентах?

Answer 2

[Виталий Киренков]

Значит он у вас и не особо то резиновый, раз "если слегка сжимать — шаблон разъезжается." ...

Я бы на вашем месте сначала включил мозг и понял собственно как блоки должны выстраиваться в каждом из разрешений (320, 520, 768, 1000). Если ваша структура позволяет перестраивать блока как задумали, то после озадачиться перегонкой из пикселей в проценты, и em-ы.

Comments

[RGoldvarg]

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

Вопрос звучит слегка иначе.

[Виталий Киренков]

Ну, раз я перечислил разрешения, то соответственно я подразумевал media queris, думал догадаетесь.
И если вы сейчас подключите бутстрап, то он просто поломает вам весь сайт своими стилями.

[andreyqin]

@DeLaVega, 520?

[Виталий Киренков]

@andreyqin , пардон, 568px.

[andreyqin]

@DeLaVega, 480

[Виталий Киренков]

@andreyqin landscape iPhone 5 - 568 =)
И вообще - www.responsinator.com

[andreyqin]

@DeLaVega, не знал, но вообще 480 все-таки более распространено.

[RGoldvarg]

С медиа-кверисам то все ясно, вопрос заключается в том, а необходимо ли переводить основной шаблон, который корректно отображается от 1150px в процентном соотношении? или на проценты сажать исключительно доп.разрешения для мобильных устройств?

[Виталий Киренков]

@andreyqin возможно, но от того что оно распространено это вовсе не означает, что оно правильнее. Зачем делать доп. условие в медиакверис, для 568, если можно сделать его брейкпоинтом, и он включит в себя и 480...

[Виталий Киренков]

@RGoldvarg да чего там перегонять то?! 1150 - 100%, вложенные колонки посчитайте, дело то... Поменяете базу с пикселей на проценты, и останется лишь брейкпоинтами чутка подрегулировать под каждый размер.

[RGoldvarg]

:)))) Не стоит судить строго, все мы когда начинали... :) Поэтому, я и спрашиваю у профессионалов своего дела, как лучше...) Спасибо, что находите время и отвечаете. А отступы задавать в процентах или EM?

[Виталий Киренков]

@RGoldvarg Скажите пожалуйста, в чём разница между процентами и em-ами?) И чему равна единица измерения - em?

[andreyqin]

@DeLaVega, а еще лучше, я думаю, будет включить в учет ширину 600px, стили для неё вполне подойдут под 568px и дополнительно покроют некоторые модели планшетов.

[andreyqin]

@RGoldvarg, задавайте в процентах.