@Darth_Solo
Падаван области Фронт-энда.

Какой сделать ширину сайта?

Добрый день. В целях обучения взялся верстать макет. Размеры фиксированные.
В итоге столкнулся с некоторыми проблемами (что логично):
Макет выполнен по размерам в ширину 1280px. Я делал все контейнеры такого размера. При тесте же, получилась горизонтальная прокрутка. В ходе выяснений понял, что при размере окна в 1280, учитывается размер бокового скролл бара и сайт получается длиннее на его длину.
Что делать в таком случае?
Знакомый мне рассказывал что размеры для сайтов с адаптивом опираются на 3-4 основных размера - 768, 992 и 1200.
Была мысль подогнать все пропорционально под 1200... Но верный ли это вывод, если макет под 1280. Может есть более логичный и применяемый метод в верстке?
  • Вопрос задан
  • 23072 просмотра
Решения вопроса 1
GreenBee
@GreenBee
ASP.NET программист
А кто рисовал макет? Было ли в ТЗ на верстку требование сделать адаптивный дизайн?
Профессионал понимает, что макет под 1280px должен иметь мЕньшую ширину (например, 1200px), как раз из-за скроллбара.
Кроме того, в идеале под адаптивный дизайн должно быть несколько макетов.
Адаптивный != резиновый.
Адаптивный лишь означает, что у вас есть несколько наборов стилей под разные разрешения. Но это несколько жестких вариантов с конкретной шириной.
К примеру, в известном фреймворке для адаптивной верстки Bootstrap используются такие пороговые значения:
1. < 768px
2. < 992px (>=768px)
3. < 1200px (>=99px)
4. >=1200px

Соответственно под каждую такую ступень определенные элементы имеют четкие размеры.
Стандартный контейнер бутстрап имеет такие значения ширины:
1. без указания ширины
2. 750px
3. 970px
4. 1170px
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@deleted-webter
О себе вот тут такой рассказ. Бит среди терабайтов
Может Имелось ввиду max-wight 1280 ?
Ответ написан
Комментировать
kalbac
@kalbac
Wordpress Developer Full-Stack
Если делать адапривную вёрстку то нужно учитывать размеры минимум 4ч экранов (менее 420, до 768, до 992 и более 1200). все контейнеры ко умолчанию должны иметь css свойство box-sizing: border-box; и иметь степень вложенности .container>.row>.block где контейнер = width:100%, row = ширине относительно текущего media query (например 992px) и mergin-left: auto; mergin-right:auto;
для .row пишите что то типа этого
@media only screen and (max-width: 420px) {
 .row {
  width:419px;
 }
}
@media only screen and (max-width: 768px) {
 .row {
  width:766px;
 }
}
@media only screen and (max-width: 992px) {
 .row {
  width:991px;
 }
}
@media only screen and (min-width: 1200px) {
 .row {
  width:1280px;
 }
}


А вообще если вы только озадачились адаптивной вёрсткой, то советую вам сразу начать с изучении фреймворка bootstrap, который упростит вам работу в разы. (Ну или воспользоваться другими альтернативными css фреймворками)
Ответ написан
Есть основные размеры которые можно условно назвать
Смартфон 320+
Планшет в портретной ориентации 768+
Планшет в альбомной (нетбук) ~980+
Десктоп (ноутбук) 1200

Далее все зависит от дизайна, который в свою очередь зависит от целей проекта. У меня был проект в котором последний breakpoint был 1600 например.

Все достаточно просто: после каждого задуманного breakpoint'а меняются стили элементов, предлагая оптимальный интерфейс для текущего размера экрана.

Логично, что ширина контента 1280px оптимальна для экранов с разрешением от 1366px по ширине.

Разработка адаптивного интерфейса - задача дизайнера.
Многие заказчики тут пытаются сэкономить, заказывая статичный макет (в котором чудо если ещё сетка есть), а затем дают верстальщику чтобы значит адаптив от айфона до телевизора. На выходе в таком случае получается нечто на костылях.
Ответ написан
@lvbmessage
Мы в студии, привыкли делать макеты под два разрешения:
-320
-768
При этом ширина исходного макета может быть любой.
...но бывают исключения

Например, сделали макет под 1400 px. С адаптивностью явные проблемы будут, если тянуть с 1400 до 768 px. Тут уже необходимо будет добавить промежуточный: 1200 или 1170. До 992 верстальщик сам дотянет если конечно верстает нормально.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽
08 окт. 2024, в 13:45
15000 руб./за проект
08 окт. 2024, в 13:29
100000 руб./за проект
08 окт. 2024, в 13:13
5000 руб./за проект