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

Question

[109k4]

Допустим у меня есть макет шириной 1440px , сначала я верстю его под эту ширину экрана, затем адаптируют под меньшие экраны (меняя расстановки блоков, уменшая шрифты, размер блоков и тд).
А как быть с большими экранами, под них тоже нужно делать аналогичные действия как с адаптивом для малых, может все же есть возможность как-то масштабировать картинку для больших, чтобы она выглядела точно так же как верстка для дефолтного размера? И если да, то засчитает ли это гугл как полноценный адаптив, не будет проигрыша в SEO из-за этого?

Answer 1

[approximate solution]

Допустим у меня есть макет шириной 1440px

Он и будет центрировать ваш контент на больших экранах, даже если вы смотрите на сайт с экрана телевизора - контент будет "закован" в эти 1440px.

Другой вариант - делать резиновый контейнер, он же container-fluid. Ваш контент будет распределен равномерно по всему экрану, но что бы это адекватно смотрелось - дизайнер должен был продумать этот момент.

Comments

[109k4]

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

[Rustam Bainazarov]

109k4, вы что-то путаете понятия пиксель-в-пиксель и масштабирование под. Вкратце, нельзя так делать. Автор ответа всё верно написал.

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

Гугл оценивает только десктоп (1360 пикселей раньше было) и мобильную вёрстку. Если это есть, то всё нормально. Промежуточные диапазоны ему не интересны.

Answer 2

[xmoonlight]

1. Про изображения: тут.
2. Делите секции так: 1920, 1280, 800, 320.
(Prev=Start=320, Next=Prev+ ~500).
3. Разметка - на флексах.
4. Шрифты - своя, более мелкая сетка для выравнивания строк (вертикальный ритм).

Answer 3

[Арсений Матыцин]

1. Mobile first уже не первый год оправдывает свое существование. Оптимальнее идти от меньше к большему в верстке.
2. Для использования различных изображений используется srcset в img или picture тегах.
3. Большой монитор (чаще широкоформатный) != ретина дисплей (дисплей с повышенной плотностью).
4. Для нестандартных мониторов, в том числе широкофматных нужен макет, либо ответственность за изменения макета (вообще круто, когда широкоформатка отображает подогнанный под нее дизайн), в противном случае центрируй основной контейнер. Даже при подгонке под широкоформатку имеет место быть центрированный контейнер.
5. Такие изощрения сами по себе никакого отношения к SEO не имеют. Важно, чтобы сайт адаптировался под мобилку, так как поисковая выдача все больше идет на них.
6. При такой постановке вопроса ты скорее всего запорешь оптимизацию проекта, либо наделаешь кучу ошибок по валидации и без удержания внимания на сайте при естественном продвижении скорее всего будешь болтаться где-то в конце списка.

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

Иметь макет для подобных форматов или иметь опыт дизверстки.