Как сделать сайт адаптивным на все экраны: Как адаптировать сайт под разные разрешения экрана: инструменты, гайды

Как сделать изображения адаптивными с помощью CSS — Разработка на vc.ru

Большинство сегодняшних сайтов адаптивны. А если в нём нужно центрировать и выровнять изображение, необходимо научиться делать изображения плавными или адаптивными с помощью CSS.

34 312 просмотров

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

Также вы узнаете некоторые общие проблемы, которые могут возникнуть при попытке сделать изображения адаптивными. Я постараюсь объяснить, как их решить.

Что мне следует использовать: относительные или абсолютные единицы?

Сделать изображение гибким или отзывчивым на самом деле довольно просто. Когда вы загружаете изображение на веб-сайт, оно имеет ширину и высоту по умолчанию. Вы можете изменить их с помощью CSS.

Чтобы изображение было отзывчивым, нужно присвоить новое значение его свойству width.

Тогда высота изображения автоматически изменится.

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

img { width: 500px; }

Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.

img { width: 50%; }

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

Стоит ли использовать медиа-запросы?

Один из вопросов, который мне задают чаще всего, — следует ли использовать медиа-запросы.

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

Ответ на этот вопрос: «это зависит от обстоятельств». Если хотите, чтобы изображение имело разные размеры от одного устройства к другому, нужно будет использовать медиа-запросы. В противном случае вы этого не сделаете.

Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, понадобится помощь медиа-запросов:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Таким образом, в соответствии с правилом медиа-запроса любое устройство размером менее 480 пикселей будет занимать всю ширину экрана.

Почему свойство max-width не очень хорошее?

Другой способ, которым разработчики могут создавать адаптивные изображения, — это свойство max-width. Однако это не всегда лучший метод, поскольку он может работать не для всех размеров экрана и устройств.

Прежде чем перейти к примеру, необходимо понять, что именно делает свойство max-width.

Свойство max-width устанавливает максимальную ширину для элемента, которая не позволяет ширине этого элемента быть больше, чем его значение max-width (но может быть меньше).

Например, если изображение имеет ширину по умолчанию 500 пикселей, а размер вашего экрана всего 360 пикселей, вы не сможете увидеть полное изображение, потому что недостаточно места:

img { max-width: 100%; width: 500px; // assume this is the default size }

Поэтому вы можете определить свойство max-width для изображения и установить его на 100%, что сжимает изображение с 500 до 360 пикселей. Таким образом, вы сможете увидеть полное изображение на экране меньшего размера.

Хорошо то, что, поскольку вы используете относительные единицы, изображение будет плавным на любом устройстве размером менее 500 пикселей.

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

Чтобы исправить это, вам нужно снова использовать свойство width, что делает бесполезным свойство max-width.

А что насчет высоты?

Другая распространенная проблема, с которой вы можете столкнуться, связана со свойством высоты. Обычно высота изображения автоматически изменяется, поэтому вам не нужно назначать свойство высоты вашим изображениям (потому что это как бы ломает изображение).

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

img { width: 100%; height: 300px; }

К счастью, есть еще одно свойство, которое предлагает CSS для решения этой проблемы …

Решение: свойство Object-Fit

Чтобы иметь больший контроль над вашими изображениями, CSS предоставляет другое свойство, называемое object-fit. Давайте воспользуемся свойством object-fit и присвоим значение, которое улучшит внешний вид вашего изображения:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

При необходимости вы также можете использовать свойство object-position (в дополнение к object-fit), чтобы сфокусироваться на определенной части изображения. Многие люди не знают о свойстве соответствия объектам, но это может быть полезно для решения подобных проблем.

Надеюсь, этот пост помог вам понять и решить ваши проблемы с адаптивными изображениями. Если вы хотите узнать больше о веб-разработке, посетите мой канал на Youtube.

Спасибо за чтение!

Ссылка на оригинал.

html — Как сделать сайт адаптивным для одинакового разрешения экрана, но разного размера?

Задать вопрос

Вопрос задан 6 лет 3 месяца назад

Изменён 5 лет 11 месяцев назад

Просмотрен 315 раз

Доброго времени суток, есть 2 монитора, один с диагональю 23 и разрешением 1920×1080, на нем я и делаю сайт, и отталкиваюсь от него, создавая адаптивность для разрешений поменьше, используя стандартное средство браузеров для проверки адаптивности, к примеру когда я проверяю разрешение 1366×768 и создаю для этого разрешения стили, то все нормально, однако стоит открыть сайт на ноутбуке с разрешением 1366×768 дизайн немного отличается от того, что показывает инструмент браузера для того же разрешения, к примеру, если в инструменте для 1366 все ровно, то на ноуте с тем же разрешением немного все плывет вниз, как с этим быть ? И второй момент, есть маленький ноут с диагональю 15 и разрешением 1920×1080, и так все стили по умолчанию, которые и делались под это разрешение — плывут, но на мониторе с тем же разрешением все нормально, как сделать стили для одного разрешения но разного размера устройств ?

• html
• css
• bootstrap
• адаптивная-верстка

Сложно будет добиться «идентичности» на разных устройствах. Начните с добавления <meta name="viewport" content="width=device-width, initial-scale=1"> (в head)своего сайта. Опять же если не вникать в проблемы кроссбраузерности. Можно попробовать отказаться от размеров в px а перейти на em/rem или же вообще на vw/vh

Если я правильно понимаю вопрос то в стилях нужно использовать относительные размеры в em/rem. Хотя лично у меня возникали при этом проблемы связанные с плотностью пикселей на разных устройствах (dpi) — на мониторе одно, на реальном устройстве все уезжает.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Учебное пособие по адаптивному дизайну: примеры мультимедийных запросов и многое другое

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

Чтобы обеспечить оптимальное взаимодействие с пользователем в качестве разработчика внешнего интерфейса, ваш сайт должен настроить свой макет в соответствии с этими различными устройствами (т. Е. Их различными разрешениями экрана и размерами, контролируемыми медиа-запросами в CSS. Процесс

отвечает к форме пользовательское устройство именуется (как вы уже догадались) адаптивный веб-дизайн (RWD).

Почему стоит потратить время на изучение примеров мультимедийных запросов адаптивного веб-дизайна и переключить внимание на RWD? Некоторые веб-дизайнеры, например, вместо этого делают делом своей жизни обеспечение стабильной работы пользователей во всех браузерах, часто тратя дни напролет на решение мелких проблем с Internet Explorer.

Это глупый подход.

Некоторые веб-дизайнеры целыми днями решают мелкие проблемы с Internet Explorer и оставляют своих мобильных пользователей в качестве второстепенных посетителей. Это глупый подход.

Компания Mashable назвала 2013 год годом адаптивного веб-дизайна. Почему? Более 30% их трафика приходится на мобильные устройства. Они прогнозируют, что к концу года это число может достичь 50%. В целом в Интернете 17,4% веб-трафика приходилось на смартфоны в 2013 году. В то же время на использование Internet Explorer, например, приходится всего 12% всего трафика

браузеров , что примерно на 4% меньше, чем в прошлом году. (по данным W3Schools). Если вы оптимизируете для конкретного браузера, а не для глобальной популяции смартфонов, вы упускаете из виду лес за деревьями. И в некоторых случаях это может означать разницу между успехом и неудачей — адаптивный дизайн влияет на показатели конверсии, SEO, показатели отказов и многое другое.

Что обычно упускается из виду в отношении RWD, так это то, что речь идет не только о настройке внешнего вида ваших веб-страниц; вместо этого следует сосредоточиться на логической адаптации вашего сайта для использования на разных устройствах. Например: использование мыши не обеспечивает такой же пользовательский опыт, как, скажем, сенсорный экран. Вы не согласны? Ваши адаптивные макеты для мобильных устройств и настольных компьютеров должны отражать эти различия, определенные в медиа-запросах сайта для настольных компьютеров, планшетов или мобильных устройств.

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

С технической точки зрения, решение кроется в этом руководстве по адаптивному дизайну: использование мультимедийных запросов CSS, псевдоэлементов, гибких наборов макетов сетки и других инструментов для динамической настройки на заданное разрешение.

Медиа-запросы адаптивного дизайна: примеры

Типы мультимедиа впервые появились в HTML4 и CSS2. 1, что позволило размещать отдельные CSS для экрана и печати. Таким образом, можно было установить отдельные стили для отображения страницы на компьютере по сравнению с ее распечаткой.

или

 @экран мультимедиа {
    * {
        фон: серебро
    }
}
 

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

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

В приведенном ниже примере адаптивного CSS показана процедура запуска определенного файла CSS с учетом ширины страницы. Например, если 480 пикселей — максимальное разрешение экрана текущего устройства, то будут применены стили, определенные в main_1.css.

Мы также можем определить разные стили в одной и той же таблице стилей CSS, чтобы они использовались только в том случае, если выполняются определенные ограничения. Например, эта часть нашего отзывчивого CSS будет использоваться только в том случае, если текущее устройство имеет ширину выше 480 пикселей:

 @media screen и (min-width: 480px) {
    дел {
        плыть налево;
        фон: красный;
    }
    .......
}
 

«Smart Zoom»

Мобильные браузеры используют так называемое «умное масштабирование», чтобы предоставить пользователям «превосходный» опыт чтения. По сути, интеллектуальное масштабирование используется для пропорционального уменьшения размера страницы. Это может проявляться двумя способами: (1) масштабирование по инициативе пользователя (например, двойное касание экрана iPhone для увеличения текущего веб-сайта) и (2) первоначальное отображение увеличенной версии веб-страницы на нагрузка.

Учитывая, что мы можем просто использовать адаптивные медиа-запросы для решения любых проблем, на которые может быть направлено интеллектуальное масштабирование, часто желательно (или даже необходимо) отключить масштабирование и убедиться, что содержимое вашей страницы всегда заполняет браузер:

Установив для initial-scale значение 1, мы управляем начальным уровнем масштабирования страницы (то есть величиной масштабирования при загрузке страницы). Если вы спроектировали веб-страницу так, чтобы она была адаптивной, то ваш гибкий, динамичный макет должен разумно заполнять экран смартфона, не требуя начального масштабирования.

Кроме того, мы можем полностью отключить масштабирование с помощью user-scalable=false .

Ширина страницы

Предположим, вы хотите предоставить три различных адаптивных макета страницы: один для настольных компьютеров, один для планшетов (или ноутбуков) и один для смартфонов. Какие размеры страницы следует использовать в качестве предельных значений (например, 480 пикселей)?

К сожалению, не существует определенного стандарта для целевой ширины страницы, но часто используются следующие примерные адаптивные значения:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Однако существует несколько различных определений ширины. Например, 320 и выше имеют пять приращений CSS3 Media Query по умолчанию: 480, 600, 768, 992 и 1382 пикселей. Наряду с данным примером в этом руководстве по адаптивной веб-разработке я мог бы перечислить по крайней мере десять других подходов.

С любым из этих разумных наборов приращений вы можете ориентироваться на большинство устройств. На практике обычно нет необходимости отдельно обрабатывать все вышеупомянутые примеры медиа-запросов ширины страницы — семь разных разрешений, вероятно, будут излишними. По моему опыту, чаще всего используются 320 пикселей, 768 пикселей и 1200 пикселей; этих трех значений должно быть достаточно для таргетинга на смартфоны, планшеты/ноутбуки и настольные компьютеры соответственно.

Псевдо-элементы

Опираясь на адаптивные медиа-запросы из предыдущего примера, вы также можете захотеть программно показать или скрыть определенную информацию в зависимости от размера устройства пользователя. К счастью, это тоже можно сделать с помощью чистого CSS, как описано в руководстве ниже.

Во-первых, скрытие некоторых элементов ( дисплей: нет; ) может быть отличным решением, когда речь идет об уменьшении количества экранных элементов для макета смартфона, где почти всегда не хватает места.

Но помимо этого, вы также можете проявить творческий подход с псевдоэлементами CSS (селекторами), например, :before и :after . Примечание: повторюсь, псевдоэлементы поддерживаются всеми основными браузерами.

Псевдоэлементы используются для применения определенных стилей к определенным частям элемента HTML или для выбора определенного подмножества элементов. Например, псевдоэлемент :first-line позволяет вам определять стили исключительно в первой строке определенного селектора (например, p:first-line будет применяться к первой строке всех p s). Точно так же псевдоэлемент a:visited позволит вам определить стили для всех a со ссылками, ранее посещенными пользователем. Ясно, что они могут пригодиться.

Вот простой пример адаптивного дизайна, в котором мы создаем три разных макета для кнопки входа, по одному для настольного компьютера, планшета и смартфона. На смартфоне у нас будет одинокая иконка, а на планшете будет такая же иконка с «Именем пользователя». Наконец, для рабочего стола мы также добавим короткое обучающее сообщение («Вставьте свое имя пользователя»).

 .имя пользователя:после {
    content:"Введите ваше имя пользователя";
}
Экран @media и (максимальная ширина: 1024 пикселей) {
    .имя пользователя: до {
        содержимое:"Имя пользователя";
    }
}
Экран @media и (максимальная ширина: 480 пикселей) {
    .имя пользователя: до {
        содержание:"";
    }
}
 

Используя только псевдоэлементы :before и :after , мы получаем следующее:

Чтобы узнать больше о магии псевдоэлементов, Крис Койер написал хорошую статью CSS-Tricks.

Итак, с чего начать?

В этом уроке мы установили некоторые строительные блоки адаптивного веб-дизайна (например, медиа-запросы и псевдоэлементы) и представили несколько примеров каждого из них. Куда мы идем отсюда?

Первый шаг, который вы должны сделать, это организовать все элементы вашей веб-страницы в соответствии с размерами экрана.

Взгляните на настольную версию раскладки, представленную выше. В этом случае содержимое слева (зеленый прямоугольник) может служить своего рода главным меню. Но когда используются устройства с более низким разрешением (например, планшет или смартфон), может иметь смысл отображать это главное меню на полную ширину. С помощью медиа-запросов вы можете реализовать это поведение следующим образом:

 Экран @media и (макс. ширина: 1200 пикселей) {
    .меню {
        ширина: 100%;
    }
}
Экран @media и (минимальная ширина: 1200 пикселей) {
    .меню {
        ширина: 30%;
    }
}
 

К сожалению, этот базовый подход часто оказывается недостаточным, так как ваш внешний интерфейс усложняется. Поскольку организация контента сайта часто значительно различается между версиями, предназначенными для разных устройств, взаимодействие с пользователем в конечном итоге зависит от использования не только адаптивного CSS для настольных и мобильных устройств, но также HTML и JavaScript.

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

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

Различные способы использования вашего контента также важны. Например, когда у вашего пользователя есть мышь, он может установить курсор над определенными элементами, чтобы получить больше информации, поэтому вы (как веб-разработчик) можете оставить некоторую информацию для сбора таким образом, но это не будет случай, когда ваш пользователь находится на смартфоне.

Кроме того, если вы оставите кнопки на своем сайте, которые затем отображаются на смартфонах размером меньше обычного пальца, вы создадите неопределенность в использовании и ощущении вашего сайта. Обратите внимание, что на изображении выше стандартное веб-представление (слева) делает некоторые элементы совершенно непригодными для использования на меньшем устройстве.

Такое поведение также увеличивает вероятность того, что ваш пользователь совершит ошибку, что замедлит его работу. На практике это может проявляться в снижении количества просмотров страниц, снижении продаж и общей вовлеченности.

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

 изображение {
    максимальная ширина: 100%
}
 

С другими элементами следует обращаться аналогичным образом. Например, отличным решением для иконок в RWD является использование IconFonts.

Несколько слов о системах Fluid Grid

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

Хотя эти системы с плавающей сеткой тесно связаны с тем, что мы здесь обсуждали, на самом деле они представляют собой целую отдельную сущность, для подробного обсуждения которой потребуется дополнительное руководство. Поэтому я упомяну лишь некоторые основные фреймворки, поддерживающие такое поведение: Bootstrap, Unsemantic и Brackets.

Заключение

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

Дополнительные материалы в блоге Toptal Engineering:

• Один размер подходит некоторым: руководство по адаптивным изображениям для веб-дизайна
• Адаптивного дизайна недостаточно, нам нужна адаптивная производительность
• Учебное пособие по макету CSS: от классических подходов к новейшим технологиям
• Учебное пособие по Flexbox и Sass Grid: оптимизация адаптивного дизайна
• Как создавать смарт-макеты только на CSS с помощью Flexbox

Сделайте свое веб-приложение отзывчивым ко всем размерам экрана (без библиотек) — Руководство для начинающих | Анируд Мукерджи | Блог Анируддха

Для людей, которые плохо знакомы с программированием или создают свое первое веб-приложение с помощью React, или просто пробуют свои силы в HTML и CSS, создание приложения, реагирующего на все размеры экрана, является серьезной проблемой. Разработчики очень часто вообще пренебрегают этим аспектом своего приложения, что в конечном итоге становится серьезной проблемой. Когда вы делитесь ссылкой на ваше недавно созданное веб-приложение с друзьями, помните, что они откроют его на своих смартфонах, а не на компьютере, поэтому приложение, которым вы так гордитесь, может в конечном итоге выглядеть как разрозненный головоломки на их крошечных экранах. Итак, если вы не хотите, чтобы кнопка регистрации летала поверх логотипа приложения, важно в первую очередь учитывать эту проблему.

Хотя такие библиотеки, как Bootstrap и Reactstrap, отлично подходят для сокращения времени написания CSS, у них есть свои недостатки, связанные с отсутствием творческой свободы. Становится сложно разработать полностью индивидуальное веб-приложение с желаемой темой с помощью этих библиотек, которые накладывают ряд ограничений в процессе проектирования. Таким образом, чистый CSS — это единственный способ заставить ваше веб-приложение выглядеть так, как вы хотите, вплоть до мельчайших деталей.

Обычно мы начинаем кодить некоторые части фронтенда на Bootstrap, а затем для некоторых частей используем чистый CSS, и в конце концов, когда вы пытаетесь что-то изменить, все превращается в кашу. Иногда CSS работает не так, как вы ожидали, а иногда Bootstrap ведет себя странно, затрудняя процесс отладки и в целом делая приложение отзывчивым. Следовательно, даже если вы используете и библиотеки, и CSS, старайтесь использовать их так, чтобы они не конфликтовали друг с другом.

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

Новички часто используют параметр измерения «px» при написании своего CSS. Пиксели являются фиксированными величинами. Он представляет собой абсолютное значение, как метр или дюйм. Это фиксировано, и поэтому вам следует избегать его. То, что может показаться небольшим расстоянием на вашем гигантском мониторе, может оказаться огромным расстоянием на чьем-то iPhone SE, потому что «px» остаются фиксированными, даже если размер экрана меняется. И именно поэтому вы должны использовать относительные единицы. Относительные единицы меняют свое значение в зависимости от размера экрана и разрешения, что делает процесс создания адаптивных приложений более плавным.

CSS имеет несколько относительных единиц. Самые полезные из них: rem, em, vh, vw и проценты. Вы будете часто использовать их, чтобы сделать свой CSS адаптивным.

em относится к размеру шрифта текущего родителя.

rem — это root em, и, как следует из названия, он зависит от размера шрифта корневого элемента. Это зависит от размера шрифта по умолчанию, установленного в веб-браузере пользователя. В Chrome по умолчанию установлено значение 16px.

vh обозначает высоту просмотра окна браузера

vw обозначает ширину просмотра окна браузера

процент относительно родительского элемента

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

 
 
 
Большой тунец
 
  
 
 

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

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

Если вы не создаете веб-сайт в стиле ретро из 90-х, вам обязательно понадобится использовать flexbox для создания современных веб-сайтов. Flexbox предоставляет очень простой в реализации способ распределения различных элементов в контейнере. Для использования flexbox вам необходимо добавить все элементы в родительский элемент и установить для свойства display значение flex. Flexbox поставляется с множеством вариантов настройки. Прелесть flex в том, что он реагирует на размеры экрана, а это значит, что он может увеличивать или уменьшать элементы в зависимости от размера экрана. Подробнее о flexbox можно прочитать здесь.

 .parent{ 
 дисплей: гибкий; 
 } 

Grid — улучшенная версия flexbox. В отличие от flexbox, Grid является двумерным, что означает, что вы можете работать одновременно со строками и столбцами. Как и во flexbox, вам нужно обернуть нужные элементы в виде элементов сетки в контейнер сетки и применить свойство отображения сетки. Grid поставляется с широким набором функций и настроек. Читайте больше о них, здесь.

 .grid-контейнер{ 
 дисплей: сетка; 
 } 

Медиа-запрос — это когда вы явно сообщаете CSS, что этот фрагмент кода предназначен только для упомянутого размера экрана . Медиа-запрос принимает параметр ширины экрана:

 @media only screen and (max-width: give_a_value) { 
 /* Здесь находится ваш CSS для определенного размера экрана */ 
 } 

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

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

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