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

Question

[Дмитрий]

Добрый день. В целях обучения взялся верстать макет. Размеры фиксированные.
В итоге столкнулся с некоторыми проблемами (что логично):
Макет выполнен по размерам в ширину 1280px. Я делал все контейнеры такого размера. При тесте же, получилась горизонтальная прокрутка. В ходе выяснений понял, что при размере окна в 1280, учитывается размер бокового скролл бара и сайт получается длиннее на его длину.
Что делать в таком случае?
Знакомый мне рассказывал что размеры для сайтов с адаптивом опираются на 3-4 основных размера - 768, 992 и 1200.
Была мысль подогнать все пропорционально под 1200... Но верный ли это вывод, если макет под 1280. Может есть более логичный и применяемый метод в верстке?

Answer 1

[Арам Арамян]

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

Соответственно под каждую такую ступень определенные элементы имеют четкие размеры.
Стандартный контейнер бутстрап имеет такие значения ширины:
1. без указания ширины
2. 750px
3. 970px
4. 1170px

Comments

[Дмитрий]

Спасибо за такой развернутый ответ.)

ТЗ как таковое дал мне товарищ. Он дал мне макет (макет рисовал дизайнер) и сказал сделать его адаптивным.
Да, про разницу адаптива и резины уже знаю.)
Я сперва стал делать для десктопа, и опирался на размеры 1280, потому как думал что он оптимальный. Ну и вот шишку набил, но главное с пользой.)

Про 1200 понял.

А если пользователь нэтбука(1024px) зайдет на такой сайт то у него будет горизонтальная прокрутка.
Под них сейчас адаптируют или считают это излишком?

[Mr Crabbz]

Дмитрий: хороший современный сайт - это адаптивный сайт, который можно просмотреть с любого устройства без напрягов.
На половине моих проектов 30% посетителей - с планшетов и телефонов. Зачем же их терять?

[Дмитрий]

Роман Краббз: Я только за и полностью согласен. Вопрос был в том, что в основном все опираются на три точки: 768, 992 и 1200. А как быть с 1024 и теми кто ниже 768(те же айфоны). Под них адаптирование считается общепринятой практикой или уже по ситуации.

Хотя лично я считаю что стоит адаптировать под 480 стоит заморочиться, а под 1024 уже не столь важно (процент небольшой).

[Mr Crabbz]

Дмитрий: Стоит заморачиваться на всех разрешениях от 320 до 1920 (про ретину - отдельный разговор). То есть, ваш сайт должен хорошо отображаться на каком нибудь LG-старичке с шириной 320, но и так же хорошо на китайском нонейме с каким-нибудь нестандартным экраном 366 например.
То есть, не нужно отталкиваться от жесткого количества расширений. Нужно лишь отталкиваться от брейкпоинтов, после которых какие-то элементы сайта должны перестроится или уменьшится.
Перефразирую: не нужно делать четко 3 расширения например 320, 480, 768. Нужно делать так, чтобы все выглядело хорошо на абсолютно любом разрешении.
То есть, открываем ctrl+shift+m в firefox, тянем плавно, прямо по пикселю, ширину экрана и смотрим что происходит с сайтом.

[Арам Арамян]

Дмитрий:
Не будет у 1024 никакой прокуртки. Будут поля.
в адаптивной верстке указываются ПОРОГОВЫЕ значения. Т.е. 1024 попадает в порог 1200px > 1024px >=992px, а значит для него в бутстрапе будет показываться версия с шириной контейнера 970px.

Что касается более маленьких устройств, то для них будет показываться версия <768. Это версия, в которой все показывается в одну колонку без жесткого указания ширины. Обычно она нормально выглядит даже при ширине окна в 200px.

[Дмитрий]

Роман Краббз: На старте обучения так и делал (тянешь и делаешь брекпоинты).
Но ведь не думаю что вы так делаете для простых заказов (если таковые имеются).

[Дмитрий]

GreenBee: Да, понял, сглупил малость.)
Спасибо за помощь.)

[Mr Crabbz]

Дмитрий: Простые заказы тоже смотрят с мобильных. Просто изначально нужно немножко добавлять к стоимости и указывать адаптив в качестве обязательного пункта тз.

Answer 2

[Кукушкин Иван]

Может Имелось ввиду max-wight 1280 ?

Answer 3

[Максим Мартиросов]

Если делать адапривную вёрстку то нужно учитывать размеры минимум 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 фреймворками)

Comments

[Дмитрий]

Это я понял, когда ковырялся с бутстрапом.
Мой вопрос именно в ширине фикса на десктоп.
И у вас в последнем тоже ширина 1280, а в этом то и моя загвоздка.

[Дмитрий]

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

Answer 4

[Андрей Хохлов]

Есть основные размеры которые можно условно назвать
Смартфон 320+
Планшет в портретной ориентации 768+
Планшет в альбомной (нетбук) ~980+
Десктоп (ноутбук) 1200

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

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

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

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

Comments

[Дмитрий]

Спасибо за развернутый ответ.)

Answer 5

[lvbmessage]

Мы в студии, привыкли делать макеты под два разрешения:
-320
-768
При этом ширина исходного макета может быть любой.
...но бывают исключения

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