black_wolf1894
@black_wolf1894
Junior Front End Developer

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

Всем доброго времени суток, суть проблемы в следующим!
Зайдем из далека! Есть 3 вида макетов 480, 768, 960! Проблема в том, что при разрешение меньше 480px верстка начинает потихоньку ехать, я хочу узнать, можно ли, как-нибудь зафиксировать верстку (если ширина устройства меньше 480px) и смаштабировать ее на 320-ти пикселях (ну или какое там разрешение будет), то есть засунуть 480px в 320px или 360px. То есть, что я хочу по сути, надо чтобы на устройствах ≤ 480px показывалась минимальная верстка в 480px. Если просто ставить min-width 480px, то появляется скролл, на меньших устройствах, а он ни есть хорошо! Выручайте ребята, может есть у кого какие идеи? Использую foundation!
  • Вопрос задан
  • 2667 просмотров
Решения вопроса 1
arizona
@arizona
а что я, собственно, здесь делаю?...
Можно при изменении размеров экрана при достижении определенной величины фиксировать viewport
if (screen.width <= 480) {
 document.getElementById("viewport").setAttribute("content", "width=480; initial-scale=0.5");
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Наверное так:
blog.teamtreehouse.com/thinking-ahead-css-device-a...

Ксения Бутузова - по сути предложила то же самое, просто чуть кривовато, ибо это можно сделать из стилей.
Ответ написан
ProgramCodePav
@ProgramCodePav
Front-end developer. Love open source
на 480px верстка должна стать статической. То есть не проценты, а пиксели должны быть значениями ширины, высоты и т.д. В калькуляторе перегоните из процентов в пиксели. И еще viewport scale на всякий случай посмотрите
Ответ написан
RadiationX
@RadiationX
Front-End разработчик
Делайте резиново + относительные единицы измерения.
Например использовать em везде, тогда при ширине меньше 480 можно просто изменить размер шрифта у body и все блоки станут меньше.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы