Задать вопрос
@minazavr
css

Как верстать сайты большей ширины, чем твой экран?

Всем привет , возник такой вопрос, есть psd 1600px ширины , который мне нужно сверстать , но к сожалению ширина psd больше , чем мой экран , из за этого верстка становиться не удобной , так как я верстаю основываясь на размеры указанные дизайнером в фотошопе , из за чего padding(и) и margin(ы) отображаются некорректно на моем устройстве , хотя при просмотре с устройства в >=1600 px ширины , все довольно таки хорошо. Подскажите пожалуйста что делать , не разу не верстал из psd макеты большей ширины чем мой экран. Спасибо.
  • Вопрос задан
  • 11090 просмотров
Комментировать
Подписаться 8 Простой Комментировать
Решения вопроса 1
sadisme
@sadisme
font-size:30rem
Вёрстка должна отталкиваться от ширины в 1000px. И если вдруг есть макет в 1600px, то должен быть и макет под 1000px. Если нет, то дизайнер идиот.

А к вопросу как верстать - media queries, как и для любых адаптивных сайтов.
Ответ написан
11 комментариев
11 комментариев
Пригласить эксперта
Ответы на вопрос 9
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
как я понял автор просто хочет получить ответ - верстай масштабируя браузер)
Ответ написан
1 комментарий
1 комментарий
Casufi
@Casufi
1) www.adobe.com/ua/creativecloud/extract.html бесплатній сервис, которій позволяет получить падинги, шрифты, размеры с PSD не на глаз
2) Режим адаптивной верстки в браузере позволяет выставлять разрешение больше чем у монитора и сам масштабирует картинку

P.S. добавлю ресурсы чтобы выбрать соотношения сторон
screensiz.es/phone
mydevice.io
Ответ написан
Комментировать
Комментировать
andrhohlov
@andrhohlov
Купите монитор, лучше сразу 2560 шириной.
Потому что хоть Сергей и дал правильный совет, работать так не очень удобно.

По поводу макета.
Если стоит задача с 1600px макета (особенно если в нем контентная часть на всю ширину, а не ~1000) сделать адаптивную вёрстку - просите много денег и условие что как сделаете так и будет. И то если уверены что вывезете.
Присоединяйтесь, используйте, предлагайте дополнения - требования к psd-макетам
Ответ написан
Комментировать
Комментировать
tolfy
@tolfy
Фирменный стиль
единственно вменяемый способ вёрстки, если монитор меньше, чем макет:

1. из фотошоп сохраняем макет 1:1 в jpg\png
2. вставляем его подложкой
html{min-width:1600px;background:red url('maket1600.png') left top no-repeat;}

3. далее верстаем как обычно, подложка неплохо помогает видеть несовпадения вёрстки с макетом, а для просмотра вёрстки, не входящей по ширине в окно, тягаем гориз.скролл*

* т.к. у нас принудительный гор.скрол, то для оценки ошибок вёрстки по ширине даём red, если косяк - справа появится красный край
** учитываейте, что body и остальные слои поверх подложки на время вёрстки обязательно надо background-color: transparent
Ответ написан
Комментировать
Комментировать
space_pancake
@space_pancake
Если не требуется Perfect Pixel, то например в Google Сhrome, можно включить Инструменты разработчика, там активировать Device Toolbar и изменить Zoom на 75 или 50%-ов, так чтобы сайт стал влезать в экран монитора.
С другими браузерами, думаю аналогично.
Ответ написан
Комментировать
Комментировать
miha872287
@miha872287
Верстай через bootstrap ну или подобным фраймворком
Ответ написан
Комментировать
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Простое правило:
Отталкиваться нужно от минимальной ширины Desktop-макета.
Он состоит из суммы минимальных размеров по-ширине всех колонок, а они в свою очередь равны максимально возможному по-ширине элементу внутри них.
Ширина по-умолчанию для Desktop'a: 1024px
Ответ написан
Комментировать
Комментировать
@sarathorn
php программист, веб-дизайнер, коллекционер
Можно долго спорить каким должен быть макет и должен ли быть вообще.

Если ширина вашего экрана меньше ширины макета, то есть два пути:
1) Попросить заказчика/дизайнера сделать макет в 1000-1300;
2) Работать с масштабированием в браузере.

Можно просто зажать Ctrl и крутить колёсико, а можно зайти в инструменты разработчика и там уже вписать нужное разрешение.

Если от вас требуют адаптивную/резиновую вёрстку, то достаточно будет пару раз посмотреть как всё работает в 1600, а остальное время работать в 1366.

Если использовать любой фреймворк, то всё в разы проще. Например, фреймворк моего написания умеет вплоть до 8К экранов.
Ответ написан
1 комментарий
1 комментарий
dom1n1k
@dom1n1k
Купить нормальный монитор
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Развернуть web app написанный и готовый, из архива готовый код
20 апр. 2024, в 19:11
4000 руб./за проект
Настроить доступ к Netflix
20 апр. 2024, в 18:04
3000 руб./за проект
Помочь настроить GeoIp у nginx для docker nginx:alpine
20 апр. 2024, в 17:55
3000 руб./за проект
Ещё заказы