Лучшие практики для того, чтобы сделать сайт подходящим для ЛЮБОГО размера экрана?

Question

В настоящее время я создаю несколько целевых страниц, которые являются своего рода веб-сайтами типа «одна страница».

Тем не менее, по мере того, как вы будете проходить различные разделы (используя jQuery для циклического выполнения различных шагов), он будеткогда дело доходит до тестирования, время от времени его можно прижимать к маленьким экранам, а это означает, что мне, возможно, придется заставить некоторые элементы исчезать в соответствии с размером экрана.

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

Мне интересно, есть ли какие-то практики, которые я, возможно, не применяю для того, чтобы все масштабировалось в соответствии с экранами разных размеров?У меня нет проблем с планшетами или современными мобильными телефонами, но с меньшим разрешением (как правило, 1280 x 1080 и ниже) он начинает становиться довольно уродливым.

Если кто-нибудь может дать мне совет о том, как они подойдут к этому типуматерии, тогда это будет высоко ценится.

Спасибо заранее!

Answer 1

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

Это правда, что некоторые объекты просто не были созданы для небольших устройств, и, возможно, их необходимо удалить, но это не означает, что замена не может быть использована (замещенный объект)

Также легко запускать различные сценарии JQuery в зависимости от размера экрана:

    if($(window).width() >= 1024){
  // Implementation
}

Полагаю, есть только несколько методов, которые можно использовать для ваших целей

Вы думали об удалении горизонтальной прокрутки все вместе?

    html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}