Возможна ли адаптивная верстка под любое разрешение экрана?

Question

[malinkin]

Привет. Я веб разработчик со стажем около года и мне самому стыдно себе в этом признаться, но, видимо, я не до конца понимаю технологию адаптивной верстки. Есть сверстанный сайт на Bootstrap 3, готовы его версии под айпад и айфон 4 и 5. Респонсивность сделана через медиа запросы 320, 480, 568, 768 и 1024. Заказчик хотел pixel perfect верстку. Он её получил, но теперь, все устройства, не попадающие под медиа запросы, отображают месиво вместо сайта.
Видимо, я изначально применил неправильный подход к верстке и единственным выходом сейчас есть только написание медиа запросов под самые популярные устройства на Анрдроиде и планшеты.
Что посоветуете? Что почитать, что предпринять, чтобы избежать такого гемора в дальнейшем?
Спасибо.

Comments

[Максим Каракулов]

@Deodatuss
а ширина, падинги, маргины у вас в процентах?

@malinkin
нет, все в пикселях, в угоду pixel perfect.

@Deodatuss
malinkin а pixel perfect необходим только для определенных расширений?

@malinkin
Deodatuss неа, заказчик придалбывается ко всем разрешениям. Включает плагин поверх страницы и смотрит. Расходжение максимум 5 пикселей разрешено. Знал бы сначала, не брался бы :)

@Deodatuss
malinkin опираясь на мой сверх скудный опыт тут 2 решения, или штамповать гору медиазапросов и делать все фиксированно как и раньше, или конвертировать абсолютно все фиксированные величины в пикселях в проценты с максимальным количеством цифр после запятой. Я бы выбрал второй метод, ибо проценты если по методе правильно посчитать то от фиксированного отличатся не будет

@malinkin
Deodatuss ну вот и я о том же, видимо куча медиа запросов единственный выход, потому что 12 страниц в каждой по 4 состояния переделывать ну ваще не айс. Просто хотел бы совет на будущее получить, как избежать такого.

@Deodatuss
malinkin проценты наше все....ну или запретить все остальные разрешения экрана через max,min width и через meta ))

@Deodatuss
malinkin может пригодится книжка, небольшая Бен Фрейн - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств - 2014

@malinkin
Deodatuss спасибо за книжку, почитаю :)

@Deodatuss
malinkin на здоровье)

@yulsonka
Вообще pixel perfect и адаптивность это бред сивой кобылы, конечно. Адаптивность сама по себе процентарна и относительна.

Answer 1

[Юлия YuKi]

Есть разница между респонсив и адаптивностью - habrahabr.ru/post/148224/.
По хорошему же веб-разработка примерно с момента выпуска третьей версии бутстрапа стала отходить от оптимизации сайта под ряд устройств, опираясь на популярные значения ширины: 420, 768 и так далее, потому что сайт должен смотреться хорошо даже если взять, вывести его на телевизионную панель и медленно уменьшать окно браузера до 320 пикселей в ширину. Мораль в чем: примерно это при тестировании и делается, окно браузера постепенно уменьшаем или наоборот идем от малого к великому, если используем mobile-first подход и везде, где картинка "рушится" ставим breakpoint с помощью media-queries. А вот чтобы не писать кучу значений и иметь возможность ими гибко управлять - очень подойдет препроцессинг, где можно выносить переменную breakpointа, что очень упрощает кодинг хорошей адаптивности.

А еще я не очень поняла как вы пишете медиа запросы - неужели просто @media (width: 600px)?
В любом же случае прописывается диапазон типа: @media (min-width: 480px) and (max-width:567px) и тогда совсем уж месива быть, мягко говоря, не должно для устройств, лежащих в этом диапазоне ширины экрана. Возможно, это именно то, что хоть как-то исправит ваше "месиво".

Comments

[malinkin]

Спасибо за ответ :)
А по поводу брейкпоинтов в переменные. Так если у нас будет куча брейкпоинтов с нестандартными цифрами, то смысл их выность в переменные?
Это действенный метод, но что, если у меня некоторые элементы спозиционированы абсолютно. Мне на каждый пиксель брейкпоинты ставить?

[malinkin]

Да, конечно, указаны диапазоны, но проблема в том, что сделано pixel perfect под 320, 480, 568, на всем остальном, что отличается хоть как-то оьязательно что-то едет/вылазит и прочее.

[Юлия YuKi]

>>Так если у нас будет куча брейкпоинтов с нестандартными цифрами, то смысл их выность в переменные?

Они не то чтоб выносятся, просто упрощается миксином синтаксис, в переменную выносится query и value обычно, тогда можно писать нечто вроде
@include respond-to(max-width, 600px) вместо обычного @media (max-width: 600px) каждый раз, но тут да, вопрос привычки, в препроцессинге органичней смотрится вариант с инклудом.

[Юлия YuKi]

>> Да, конечно, указаны диапазоны, но проблема в том, что сделано pixel perfect под 320, 480, 568, на всем остальном, что отличается хоть как-то оьязательно что-то едет/вылазит и прочее.

Адаптивность это всегда минимизация (!) фиксирования величин, максимум возможно использование min-width, max-width кое-где и то аккуратно, ширина же в пикселах не задается, задается процент.

[malinkin]

@yulsonka а, ну так-то да, я просто подумал зачем захламлять переменные кучей непонятных значений :)

[malinkin]

@yulsonka буду стараться переходить на проценты тогда. Пока что мне это кажется дико неудобным, но посмотрим.

[Юлия YuKi]

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

[Юлия YuKi]

>> Пока что мне это кажется дико неудобным, но посмотрим.

Когда появился респонсив это был переворот мышления для девелоперов, так что вполне ок, что это кажется неудобным, попользоваться какое-то время и неудобным будут казаться высчитывания пикселов. Часть заказчиков, кстати, как раз не осилили еще того, что адаптивность и pixel perfect - вещи едва ли не противоположные и частично взаимоисключающие - переворот мышления у них не случился, поэтому таким лучше на начальных этапах пояснять, что pixel perfect при полной адаптивности лишь перегрузит сайт кучей стилей порой совсем не нужных. Я лично мобильные мокапы те же использую чисто для вдохновения и понимания как надо чтобы сворачивалось, но никакие пиксели там, конечно же, не высчитаются.

[Hovhannes Sargsyan]

@yulsonka все правильно расписала и объяснила

[dom1n1k]

Разница между отзывчивостью и адаптивностью выглядит терминологической казуистикой, высосанной из пальца.
Сколько я ни читал статей об этом, они кажутся надуманными. А посему - не нужны.

[Юлия YuKi]

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

[dom1n1k]

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

[dom1n1k]

Готовые сетки малопригодны для сложных сайтов

Answer 2

[danSamara]

Думаю вам надо изменить сам подход к вёрстке - нельзя верстать под конкретные разрешения, это тупиковый путь с бесполезными затратами времени.
Оптимальный workflow примерно такой:
1. Делаем максимально резиновую вёрстку. Всё что может быть резиновым - должно им быть, включая изображения. На этом этапе можно с картинками сильно не заморачиваться и делать просто { width: 100%; height: auto; }, перфекционизм - позже.
2. Расставляем брекпоинты. Обратите внимание: их надо расставлять не по "популярным" разрешениям экрана, а в соответствии с дизайном! Как пример - вывод товаров в каталоге в виде сетки. На большом экране будет четыре товара в ряд (25% ширины), потом - три, два и, наконец, для телефонов в портретной ориентации - один товар (100% ширины). Разрешение, при котором будет "перепрыжка" товаров с четырёх в строке на три (и прочие) надо определять визуально, лучше вместе с дизайнером. Результатом этого этапа должен быть сайт, который с максимального разрешения (допустим 2000 пикселей) до минимального (200?) красиво меняется в браузере при плавном изменении размера окна.
3. Тестируем на популярных разрешениях экрана. Заметьте, это практический последний этап. Если предыдущие этапы сделаны правильно, то на этом не остаётся никакой работы - просто проверка.
4. Наводим лоск. Здесь уже можно заняться оптимизациями и украшательставами. В частности - сделать разные источники для каждой картинки. Не буду подробно описывать технологии, руководств много в сети, по картинкам например вот: "Отзывчивые изображения: примеры использования"

Answer 3

[Hovhannes Sargsyan]

Сейчас так много устройств и такие разные размеры экранов, что надо сделать респонсив что бы везде смотрелось нормально, а адаптивный берет только популярные размеры. Это уже в прошлом, надо понимать что адаптивный и респонсив разные понятия.

На разработку респонсива уходить 3-4 больше времени чем на адаптивный, за то результат впечетляющий, ты можешь быть уверен что твой сайт везде смотрится как надо, даже на часах

Совет.
Используй препроцесори, один миксин для медиа запросов может сэкономить много времени и добавит функциональности и будет очень легко манипулировать блоками.

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

Если бустрап твой выбор, то тогда не правилный выбор, надо было самому сделать все, иногда выкинуть из бустрапа все лишное занимает больше времени, чем самому быстро сделать все.

Comments

[Юлия YuKi]

Согласна с той лишь поправкой, что для простых сайтов без отдельных заморочек на UI, UX для девайсов и где цель стоит просто тупо сделать, чтоб на мобильнике смотрелось хорошо и нормально функционировало - бутстрап вариант гораздо лучший, чем отсутствие фреймворка как такового.

Answer 4

[Sali_cat]

Можно но сложно. Я убил неделю что бы сделать приличный каркас, который работал и отображался везде. На сам дизайн не много потратил. Основана проблема это с шрифтами. Трудно сказать какие ед. луче выбрать.. точно не px. Потом баги и прочие косяки.. в одном браузере одно, в другом другое.. написал на 4.4кб сжатого кода, лишь что бы убрать все эти баги..недочеты итд.

Comments

[Sali_cat]

@Grawl Не, там мусора куча, я уже свой написал) Bootstrap на 8ке не полностью работает, если что)

[Ranwise]

Bootstrap на 8ке
Bootstrap это набор css\js файлов, вы про какую 8ку говорите? internet explorer 8?

[Sali_cat]

я про ios

Answer 5

[Сергей]

посмотрите Адрей Бернадский "Практика верстки под мобильные устройства", мне очень помогло, особенно основная идея очень проста, не стоит запоминать каждое действие, главное понять идею :-)
на основе этого я сделал profitzone.com.ua без всяких библиотек :-)
диапазон 150-3000 пкс

Comments

[AndreyNagih]

Вам стоит пересмотреть способ масштабирования изображений. Нужно все-таки сохранять пропорции любой ценой.

[Ranwise]

очень недоделаный сайт

[Сергей]

@AndreyNagih: спасибо, учту

[Сергей]

@Ranwise: где именно? конечно это не полноценный магазин, а лишь мой начальный шаблон. Мой ответ не про магазин а про резиновый макет