Адаптивная верстка - помогите сделать ТЗ

outtime, не порите чушь. ей больно

бутстрап маленькие разрешения прекрасно жрет,

почитал. Там написано об отличиях резиновой, адаптивной и отзывчивой верстки. Это понятно. Но про "что будет между ними" нифига не понял.

Граждане, а что по второму вопросу? Как не скормить юзеру на телефон с экраном фуллХД сайт для десктопа и как не показать на планшете сайт для телефона?

например так https://github.com/serbanghita/Mobile-Detect

---------- Добавлено 06.07.2018 в 17:21 ----------

Что-же тут непонятного :kozak:

Есть прорисованный макет, например, на 480 и 720

А как будет на 640 (например)?

Теперь понял, о чем речь. И думаю, что у меня есть ответ на этот вопрос. Но спасибо, что обратили внимание на это.

Может я опять туго соображаю, но мне кажется там описано как отличить смартфон от таблета и десктопа. И то, насколько я понял, отличают по юзер-агенту. А нужно немного иное.

Есть 2 устройства с разрешением экрана по ширине 1920, но одно диагональю 5 дюймов, а другое 24 дюйма.

Понятно, что какой то сложный интерфейс типа https://www.bitfinex.com/trading нужно выводить абсолютно по-разному. В первом случае нужна какая то усеченная и вытянутая под вертикальный скролл версия, во втором - максимальное использование одного большого экрана. Так вот к какому параметру можно привязаться, чтобы:

- не показать огромные буквы и кнопки на 10-дюймовом планшете, где все "в столбик"

- не показать неюзабельный полный сайт со свистелками и перделками и микроскопическими кнопочками и буковками на экране смартфона

Выше обсуждалась адаптивная и респонсив верстка. Так вот там привязка только к разрешению. А это очевидно приведет к неприятным последствиям, как в указанных кейсах.

Насколько я понял, Ваша задача имеет стандартное решение

<meta name="viewport" content="width=device-width, initial-scale=1">

Перед заказов верстки добавьте в ТЗ :

- не смешивайте все стили в 1 файл, должен быть один общий файл стилей, и уже файлы стилей которые зависят от конкретной страницы (index.css, list.css, card.css).

Сейчас говноверстальщики (а их большинство) лепят файл стилей в пару мегабайтов в котором сразу всё:)

А "говно" сервисы гугла ТРЕБУЮТ потом минимизации и ОБЪЕДИНЕНИЯ стилей

А таки, да, ГОВНОверстальщики таки.....

---------- Добавлено 06.07.2018 в 23:55 ----------

НЕ правиьно поняли. Но вникая в суть... НЕТ стандарта... Но отличить можно - 99%

---------- Добавлено 07.07.2018 в 00:35 ----------

Это @media...

Есть, как писал 99% отличить планшет от мобтлки и т.п. НО стандарта - НЕТ

НО 99% есть ВОЗМОЖНСТЬ

В адаптивной верстке мы никак не определяем устройство. Мы прописываем стили для разной "ширины" экрана. В этом и есть основной плюс.

Но тут стоит учитывать, что речь идет о пикселях CSS, а не разрешении экрана устройства... в общем, на этом моменте вам можно особо не заморачиваться. Достаточно в Хроме нажать F12 и на иконку телефона. Там будет удобный эмулятор разных устройств. Или же просто уменьшать ширину окна браузера и смотреть за результатом.

Глядя на Бутстрап, можно примерно выделить вот такие точки.

960 пикселей и меньше, 775 и меньше, 500 т меньше... и так - до 320.

Так вот, крайние 2 точки еще имеют какой-то смысл (верх - это начало планшетов, а низ - миимум для Айфонов и проверки в Гугле). А вот в промежутках лучше сделать "тянущийся" дизайн и перемещать элементы по мере необходимости.

Ну и с ТЗ по адаптивному дизайну обычно есть серьезные проблемы. Часто адаптив путают с отдельным мобильным шаблоном и рисуют в макетах элементы, которые вообще никак не связаны с текущей версткой. Или располагают блоки так, как они никогда не встанут (без особых ухищрений). :)

mmkulikov, Не, четко разбиваешь и все ок - я проверял лично выкашивая неиспользуемые стили со страницы - и все ок зеленая зона.