С какого разрешения начинать верстать?

Question

[smailenemy]

Привет.

У меня ноутбук. С разрешение 1366х768.
При вёрстке макета на данном разрешении во всех браузерах отображается сайт в соответствии с макетом, т.е. Pixel Perfect.

Все проекты сложные!!! т.е. никакой сетки не сделаешь, множество элементов с абсолютным позиционированием.

Под мобильные устройства пишу media запросы (КЭП), но столкнулся с проблемой больших мониторов.
Т.е. ещё раз, под ноутубук с разрешением 1366х786 и под мобильные устройства всё получается Pixel Perfect как в дизайн-макете, но на больших разрешениях начинают расползаться блоки.

Вопросы:
1. С какого разрешения правильно начинать верстать?
2. Покупать ли большой монитор для этих целей?
3. Как делается правильно масштабирование элементов на странице для больших мониторах (картинки, шрифт, размер блоков)? Покажите пример может где это уже реализовано?

P.S. подскажите media запрос для больших мониторов и сайта на всю ширину страницы, я так понимаю max-width: 1150px; тут не подойдёт.

Answer 1

[dom1n1k]

Есть ощущение, что в данной ситуации на верстальщика перекладывают часть проблем дизайнера.
Если поведение блоков на большом разрешение не продумано и не определено (если не отдельными макетами, то хотя бы словесным описанием) - чего бы им не расползаться?
Под дизайнером я тут понимаю не обязательно отдельное физлицо, а роль в процессе разработки (иногда дизайнер и верстальщик объединены в одном лице).

Comments

[smailenemy]

cr41247.tmweb.ru вот сайт сейчас делаю, главная страница отлично отображается на мониторах, мод мобильные пока не делаю.
Но вот страница cr41247.tmweb.ru/about.html, видите сколько пустого пространства на странице, при разршении > 1440px начинается менее читабельный текст (на блок с картинками не смотрите, т.к. я его неправильно сверстал,каюсь), поэтому мне пришлось взять медиа запрос и указать разрешение min-width: 1919px; и для каждого элемента данной страницы подбирать шрифт в EM, размер картинок в EM, размер блоков, заголовков, для того, чтобы смотрелось также как и на экране ноутбука.

[dom1n1k]

smailenemy: Подбор размера шрифта это вполне нормальная практика.
Но как я уже писал выше, это хороший повод задать вопрос дизайнеру. Да, вот так и спросить - "на большом разрешении смотрится плохо, как мне поступить?"

Answer 2

[zooks]

1. Mobile First (сначала для мобильных).
2. Желателен большой монитор 1920x1200 (рекомендую Dell)
3. Делается wrapper с параметром max-width. На сверхбольших разрешениях сайт не разъезжается, а остается нужного размера как в макете.

множество элементов с абсолютным позиционированием

Так делать не нужно.

Comments

[smailenemy]

А если сайт на всю ширину браузера?

[zooks]

smailenemy: как ответили ниже, max-width у wrapper удаляется и указывается width:100%

[Сергей Горячев]

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

[zooks]

Sergey Goryachev: mobile first ужасный? Или вы про абсолютное позиционирование?

[Сергей Горячев]

zooks: mobile first

[zooks]

Sergey Goryachev: ну так макет под мобильный тоже должен быть. А если сайт уже готов, то никакого mobile first уже не получится.

[smailenemy]

Дело в том, что дизайнеры сначала отдают для десктопа макеты ((

Answer 3

[Web Developer Blog]

Абсолютным позиционированием ? Вы серьёзно?

Comments

[smailenemy]

А что тут такого? К примеру у меня есть блок в котором есть "название должности, фото автара, картинка кнопка на личный профиль, описание человека" и всё это помещается в квадрат 200х200." Можно конечно разместить их margin-right: -100....px; но можно же основному блоку задать position: relative; и позиционировать относительно него.

Answer 4

[Pshkll]

1. Начните с 960, все остальное придёт с опытом.
2. Можно не покупать.
3. Вам это пока не нужно. Делайте так, чтобы на 960 все было читабельно.

Comments

[smailenemy]

А если сайт на всю ширину?

[Pshkll]

smailenemy: width: 100%;

Answer 5

[SueAnn]

media and (min-width: 1150px) - Это будет значить "экраны от 1150".
И не надо делать резиновую верстку, ничего не будет разлетаться. Если заказчик так уж хочет сайт и для больших и для маленьких экранов, делайте ширину 960, а если экран больше 1150, делайте ширину 1150, в любом случае, ширину больше 1200 никто не делает, так что твой монитор вполне справляется. То есть не делай блоки шириной 100%, если нужно задать фон, делаешь такой блок, а внутри него другой, шириной 960, задаешь ему margin: 0 auto; и он будет по центру

Comments

[smailenemy]

cr41247.tmweb.ru вот посмотрите, ну как такой сайт не сделать на всю ширину экрана? Такая задумка.

Answer 6

[devstudent]

1. Купите большой монитор ОБЯЗАТЕЛЬНО, и подключите его как основной .
2. Абсолютное позиционирование в более чем 5-ти элементах на странице это либо вы неправильно верстаете, либо дизайнер идиот.
3. Меряйте в фоторедакторе ширину макета по направляющим, это будет макс-ширина вашего sitewrapper -контейнера ограничителя, который при любых возможных ситуациях не даст дизайну расползтись в черте-что.

.sitewrapper{ //контейнер-обертка для всего сайта. 
  max-width:1330px; // например такая ширина
  position:relative; //обязательно 
  margin: 0 auto; //всегда сайт будет располагаться посредине. 
  padding: 0 15px;
}

<section class="article-section regular-section">
				<div class="sitewrapper">
                                   <div class="classname"></div>
</section>		</div>

Answer 7

[Григорий]

1. С какого разрешения правильно начинать верстать?

С любого. Главное представлять при вёрстке, как будет она адаптироваться в дальнейшем.

2. Покупать ли большой монитор для этих целей?

Совсем не обязательно. Есть масштаб браузера на крайний случай.

3. Как делается правильно масштабирование элементов на странице для больших мониторах (картинки, шрифт, размер блоков)??

Масштабирование (увеличение размера) не делается обычно. Если только это не указано в задании.

Comments

[itsjustmypage]

Начинать лучше с самого маленького, ибо подход Mobile first хотя бы в таких вещах это уже стандарт хорошей вёрстки. Если мы открываем сайт с телефона, то нам не придётся подгружать CSS и иконки/фоновые картинки и прочее, предназначенно для больших экранов, потому что оно спрятано в Media Queries.

Answer 8

[smailenemy]

cr41247.tmweb.ru вот сайт сейчас делаю, главная страница отлично отображается на мониторах, мод мобильные пока не делаю.
Но вот страница cr41247.tmweb.ru/about.html, видите сколько пустого пространства на странице, при разршении > 1440px начинается менее читабельный текст (на блок с картинками не смотрите, т.к. я его неправильно сверстал,каюсь), поэтому мне пришлось взять медиа запрос и указать разрешение min-width: 1919px; и для каждого элемента данной страницы подбирать шрифт в EM, размер картинок в EM, размер блоков, заголовков, для того, чтобы смотрелось также как и на экране ноутбука.

Answer 9

[Александр Ружевич]

если блоки расползаются на больших мониторах то задайте body {max-width:1920px;}
тогда все при кучке будет на больших разрешениях, либо задайте (если бутстрапом пользуетесь) один родительский контейнер с параметрами width:100%; max-width:максимальное разрешение под которое верстается сайт(обычно это 1920px)