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

Question

[YellowFellow]

Здравствуйте, хотел сверстать страничку, но столкнулся с проблемой. Ширина моего монитора 1600px, а ширина макета 1920px. Как быть в такой ситуации? Верстать всё по размерам макета? Но тогда ведь появится горизонтальная полоса прокрутки.
Макет

Comments

[Сергей delphinpro]

У современных сайтов нет жестко заданной ширины.
Они адаптивны к любым дисплеям.
Чтобы проверить отображение на большей ширине, чем ваш монитор, можно воспользоваться масштабированием страницы или возможностями средств разработчика встроенными в браузер.

Answer 1

[Владимир Проскурин]

1) Купить нормальный fullhd монитор, т.к. сейчас все сайты нужно на нем смотреть.
2) В хроме F12, слева кнопочка Toggle device toolbar, и вверху вводите нужную ширину экрана.

Answer 2

[Ankhena]

Не скачивала полный макет, а только смотрела превью, но ширина макета у вас не 1920. Это только дизайнер показал, как все должно выглядеть, например, на 1920.
Посмотрите внимательно: есть фиксированная контентная ширина, а все что выходит за нее должно быть растянуто на всю ширину окна браузера, любую.

Так что на 1600 (да и на 1200 тоже) у вас не должно быть никакой горизонтальной полосы прокрутки.

Comments

[YellowFellow]

Спасибо за пояснение про контентную ширину.Очень много прояснилось.

[Ankhena]

YellowFellow, у меня тут припасен страшненький примерчик https://jsfiddle.net/Ankhena/tg6sqe03/
Всё руки не доходят его оформить поприличнее, но суть передает.

При этом ширина inner может быть в % или фиксированная или максимальная/минимальная (например min 300 и max 1160 (или 1200)). Это уже зависит от макета и его адаптива.

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

[YellowFellow]

Ankhena, спасибо,всё наглядно)

Answer 3

[ThunderCat]

Хинт: ctrl + клавиша минус(или ролик скролл вниз) уменьшает ваш большой макет и прокрутки не будет, или задайте адаптивную ширину/высоту через тулбар хрома, как написал Владимир Проскурин .

Comments

[YellowFellow]

то есть лепить страницу под 1920px?Получится фиксированная вёрстка.А как насчёт отзывчивости?Что в этом случае делать?Задавать ширину обёртки в процентах,игнорируя размер макета,чтобы для больших экранов не было пустого пространства,а для маленьких экранов делать всё через медиазапросы?

[Rustam Bainazarov]

YellowFellow, к вашим услугам есть min-width, min-height и max-width, max-height в дополнение к традиционным width и height

[Rustam Bainazarov]

YellowFellow, типа такого:

.container {
   width: 100%;
   max-width: 1300px;
}

Answer 4

[DanKud]

А причем здесь ваш монитор и другие? Вы что только для себя хотите сверстать страницу? :)
Используйте панель разработчика SHIFT + CTRL + I и задавайте нужное расширение для тестов. А для верстки прописывайте в стилях ширину/высоту в процентах. Используйте медиа-запросы для задания стиля в зависимости от расширения монитора. Да и просто для начала загуглите - адаптивная верстка

Comments

[YellowFellow]

Проценты нужно высчитывать для всех блоков или только для обертки?

Answer 5

[Андрей Федоров]

Можно покопаться в настройках видеокарты. Например у меня nvidia + монитор 1920х1200. Я могу в настройках видяхи создать пользовательское разрешение 3520х2200 и это сработает.

ps: Хотя конечно интерполяция пикселов убьет качество...

pps: Еще вариант в браузере менять масштаб - зажать ctrl и крутить колесо мыши...

Answer 6

[Варлам Ерофеич]

Если у макета body {width: 100%;}, то ширина макета адаптируется под окно браузера.
Если надо у́же и не в процентах, то body {width: 80vw;}
Если надо шире, чем браузер любого клиента, то:
body {width: 120%;} или body {width: 120vw;} соответственно.
- И да, ширину "чилдров" макета желательно будет "опроцентовать" тоже
(как-то так...)))