@smailenemy

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

Привет.

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

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

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

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

P.S. подскажите media запрос для больших мониторов и сайта на всю ширину страницы, я так понимаю max-width: 1150px; тут не подойдёт.
  • Вопрос задан
  • 2863 просмотра
Пригласить эксперта
Ответы на вопрос 10
dom1n1k
@dom1n1k
Есть ощущение, что в данной ситуации на верстальщика перекладывают часть проблем дизайнера.
Если поведение блоков на большом разрешение не продумано и не определено (если не отдельными макетами, то хотя бы словесным описанием) - чего бы им не расползаться?
Под дизайнером я тут понимаю не обязательно отдельное физлицо, а роль в процессе разработки (иногда дизайнер и верстальщик объединены в одном лице).
Ответ написан
zooks
@zooks
Frontend и Django
1. Mobile First (сначала для мобильных).
2. Желателен большой монитор 1920x1200 (рекомендую Dell)
3. Делается wrapper с параметром max-width. На сверхбольших разрешениях сайт не разъезжается, а остается нужного размера как в макете.

множество элементов с абсолютным позиционированием
Так делать не нужно.
Ответ написан
Pshkll
@Pshkll
1. Начните с 960, все остальное придёт с опытом.
2. Можно не покупать.
3. Вам это пока не нужно. Делайте так, чтобы на 960 все было читабельно.
Ответ написан
Alexey_Suprun
@Alexey_Suprun
Web Developer Blog - ссылка в описании
Абсолютным позиционированием ? Вы серьёзно?
Ответ написан
maxminimus
@maxminimus
просто или ничего
1024 х 768 - таков css-размер экрана айпада
Ответ написан
@SueAnn
media and (min-width: 1150px) - Это будет значить "экраны от 1150".
И не надо делать резиновую верстку, ничего не будет разлетаться. Если заказчик так уж хочет сайт и для больших и для маленьких экранов, делайте ширину 960, а если экран больше 1150, делайте ширину 1150, в любом случае, ширину больше 1200 никто не делает, так что твой монитор вполне справляется. То есть не делай блоки шириной 100%, если нужно задать фон, делаешь такой блок, а внутри него другой, шириной 960, задаешь ему margin: 0 auto; и он будет по центру
Ответ написан
@devstudent
frontend-developer
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>
Ответ написан
TMGLUK
@TMGLUK
UX-дизайнер
1. С какого разрешения правильно начинать верстать?

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

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

Масштабирование (увеличение размера) не делается обычно. Если только это не указано в задании.
Ответ написан
@smailenemy Автор вопроса
cr41247.tmweb.ru вот сайт сейчас делаю, главная страница отлично отображается на мониторах, мод мобильные пока не делаю.
Но вот страница cr41247.tmweb.ru/about.html, видите сколько пустого пространства на странице, при разршении > 1440px начинается менее читабельный текст (на блок с картинками не смотрите, т.к. я его неправильно сверстал,каюсь), поэтому мне пришлось взять медиа запрос и указать разрешение min-width: 1919px; и для каждого элемента данной страницы подбирать шрифт в EM, размер картинок в EM, размер блоков, заголовков, для того, чтобы смотрелось также как и на экране ноутбука.
Ответ написан
если блоки расползаются на больших мониторах то задайте body {max-width:1920px;}
тогда все при кучке будет на больших разрешениях, либо задайте (если бутстрапом пользуетесь) один родительский контейнер с параметрами width:100%; max-width:максимальное разрешение под которое верстается сайт(обычно это 1920px)
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы