Как оптимизировать сайт под большое разрешение экрана?

Question

[reaget]

Здравствуйте!
Разрабатываю сайт. Под моим разрешением экрана (оно стандартное) всё выглядит замечательно, но если разрешение экрана будет большим (FULL HD например), то все слетает. Выглядит сайт маленьким, не пропорциональным. Как можно это исправить?

P.S. с маленькими экранами все в порядке.

Comments

[Сергей delphinpro]

Стандартное — это какое?

FullHD — это 1920×1080 и его вполне можно назвать стандартным на сегодня.
Уж большим точно не назвать. Самое обычное.

[reaget]

Сергей, Для меня стандартное - это 1366х768.

Answer 1

[4mobile]

медиа запросами.
указать контейнер для блоков с контентом, например .container {max-width: 1100px; margin: 0 auto;}
уменьшить масштаб страницы на своем экране, смотреть как выглядит.
купить монитор от 1920 по ширине для верстки современных сайтов.

Answer 2

[Максим Тимофеев]

Под моим разрешением экрана (оно стандартное)

А что существует 1 стандартное разрешение экрана?

но если разрешение экрана будет большим (FULL HD например)

То есть fullHd - это не стандарт?

Как можно это исправить?

Зависит от ситуации, если нужны общие фразы - использовать media запросы, картинки растягивать на ширину блока и т.д.
Вот например для background вариант:

@media screen and (min-width: 600px) and (min-height: 500px) {
.img {background-image: url(.../02small.jpeg)}
}
@media screen and (min-width: 800px) and (min-height: 600px) {
.img {background-image: url(.../02middle.jpeg)}
}
@media screen and (min-width: 1200px) and (min-height: 700px) {
.img {background-image: url(.../02big.jpeg)}
}

Вот еще вариант:

<img src="image/mushroom.jpg" srcset="image/mushroom_retina.jpg 2x" alt="">

Но тут надо быть аккуратным ибо:
caniuse.com/#search=srcset
Вот в догонку:

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Comments

[reaget]

Спасибо большое :)