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

Допустим у меня есть макет шириной 1440px , сначала я верстю его под эту ширину экрана, затем адаптируют под меньшие экраны (меняя расстановки блоков, уменшая шрифты, размер блоков и тд).
А как быть с большими экранами, под них тоже нужно делать аналогичные действия как с адаптивом для малых, может все же есть возможность как-то масштабировать картинку для больших, чтобы она выглядела точно так же как верстка для дефолтного размера? И если да, то засчитает ли это гугл как полноценный адаптив, не будет проигрыша в SEO из-за этого?
  • Вопрос задан
  • 637 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus
I will live forever in the flame of your eyes.
Допустим у меня есть макет шириной 1440px , сначала я верстаю его под эту ширину экрана, затем адаптирую под меньшие экраны (меняя расстановки блоков, уменшая шрифты, размер блоков и тд).


Не обязательно идти сверху вниз, можно от меньшего к большему. Но это дело вкуса и опыта. ИМХО.

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


Сначала нужно определиться до какой ширины экрана нужен адаптив и уже отталкиваясь от этого, можно выбрать какие разрешения нужно поддерживать. Вообще основой в верстке является 1920px => 320 и наоборот, а всё что выше 1920px уже как-то сугубо личное. В принципе это лишняя работа, которая не всегда будет лёгкой. Разумеется можно сделать адаптив и для 3000px и 4000px, но тут уже стоит исходить из дизайна, ведь наверняка не каждый дизайн получится растянуть до таких размеров и где-то всё же нужно фиксировать размеры, положение элементов и так далее.

И если да, то засчитает ли это гугл как полноценный адаптив, не будет проигрыша в SEO из-за этого?


SEO - не занимаюсь, поэтому без комментариев.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
approximate_solution
@approximate_solution
JS Developer
Допустим у меня есть макет шириной 1440px

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

Другой вариант - делать резиновый контейнер, он же container-fluid. Ваш контент будет распределен равномерно по всему экрану, но что бы это адекватно смотрелось - дизайнер должен был продумать этот момент.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. Про изображения: тут.
2. Делите секции так: 1920, 1280, 800, 320.
(Prev=Start=320, Next=Prev+ ~500).
3. Разметка - на флексах.
4. Шрифты - своя, более мелкая сетка для выравнивания строк (вертикальный ритм).
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
1. Mobile first уже не первый год оправдывает свое существование. Оптимальнее идти от меньше к большему в верстке.
2. Для использования различных изображений используется srcset в img или picture тегах.
3. Большой монитор (чаще широкоформатный) != ретина дисплей (дисплей с повышенной плотностью).
4. Для нестандартных мониторов, в том числе широкофматных нужен макет, либо ответственность за изменения макета (вообще круто, когда широкоформатка отображает подогнанный под нее дизайн), в противном случае центрируй основной контейнер. Даже при подгонке под широкоформатку имеет место быть центрированный контейнер.
5. Такие изощрения сами по себе никакого отношения к SEO не имеют. Важно, чтобы сайт адаптировался под мобилку, так как поисковая выдача все больше идет на них.
6. При такой постановке вопроса ты скорее всего запорешь оптимизацию проекта, либо наделаешь кучу ошибок по валидации и без удержания внимания на сайте при естественном продвижении скорее всего будешь болтаться где-то в конце списка.

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

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

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

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