Когда мы делаем адаптив сайту, нужно делать адаптив для планшетов начиная от указанной ширины в МАКЕТЕ или приблизительной ширины планшетов?
Имеется ввиду, если в макете дизайнера в фигме допустим вариант сайта для планшетов начинается с 764px ширины, то нужно начинать верстать вариант для планшетов (или телефонов) для этой ширины или же под примерный размер планшетов допустим 1000px
Дополнительно:
Такие вещи прописываются в ТЗ.
Если ТЗ нет, то по умолчанию, на ширине макета сайт должен выглядеть как в макете или очень близко к нему.
На всех остальных ширинах от 320 до ∞ сайт должен выглядеть хорошо. Где-то пропорционально, где-то с перестроениями, где-то с ограничением макс ширины. Это зависит не только от верстальщика, но и от самого макета, а также наполнения сайта. Тут нет единого универсального решения.
Ответы:
Адаптивный дизайн должен хорошо отображаться на всем спектре размеров устройств, начиная с 320/360 и до максимума вашего дизайна.
- То есть если по задумке автора на ширине 768 пикселей сайт должен выглядеть определенным образом, то мы делаем именно на 768 по задумке автора, а то что больше уже по своему усмотрению?
- Please2334, Я не являюсь сторонником принципа pixel perfect. Считаю, что дизайн является ориентиром для верстки. Если дизайнер отрисовал 768, то я сделаю такое расположение блоков в том диапазоне сетки, в котором находится это значение. В качестве сетки обычно беру значения из бутстрапа. Они достаточно сбалансированы.
Если кроме 768 и 1600 ничего больше не отрисовано, то в этом промежутке приходится самому додумывать. - Please2334, делается это по макетам дизайнера, а он, в свою очередь, должен показать как выглядит и ведёт себя дизайн при разной ширине окна. Т. е. предоставить все страницы для разных промежуточных точек. Если дизайнер не предоставил такие макеты, то либо попросите клиента разработать их и предоставить, либо уже делайте "на свой вкус", предупредив об этом заказчика. Если хватит опыта и дизайн не сложный, то вполне можно самостоятельно сделать.
По идее, если дан макет шириной 768рх, то он сделан для окна 768рх, уже с отступами внутрь для контента.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
При разработке адаптивного дизайна для сайта, важно учитывать не только различные разрешения экранов устройств, но и учитывать фактические размеры экранов, на которых ваш сайт будет отображаться.
Исходный макет может содержать указанную ширину для планшетов, но это не всегда означает, что именно эту ширину следует использовать для адаптивного дизайна. Планшеты имеют разные размеры экранов, и для того чтобы ваш сайт выглядел хорошо на всех устройствах, вам нужно принимать во внимание не только ширину изначального макета, но и ширину самых популярных планшетов на рынке.
Рекомендуется использовать подход "mobile-first", что означает, что вы сначала создаете макет для мобильных устройств, а затем добавляете стили для планшетов и десктопов. Это позволит вам создать более гибкий и адаптивный дизайн.
Чтобы определить, с какой ширины начинать стилизацию для планшетов, лучше всего изучить статистику использования различных устройств и определить наиболее популярные размеры экранов планшетов. Вы можете использовать медиа-запросы в CSS для определения стилей для различных размеров экранов.
Пример использования медиа-запроса для стилей планшетов:
@media only screen and (min-width: 768px) and (max-width: 1024px) { /* стили для планшетов */ }
Таким образом, вам лучше всего ориентироваться на фактические размеры экранов планшетов при разработке адаптивного дизайна, чтобы обеспечить оптимальное отображение вашего сайта на различных устройствах.