Отзывчивый веб-дизайн — это термин, который вы часто слышите, когда люди говорят о веб-разработке. Отзывчивость относится к тому, насколько эффективно веб-страница может адаптироваться или «реагировать» на отображение на экранах разных размеров. Если вы подумаете об огромном количестве различных размеров экранов, которые люди используют сегодня для доступа в Интернет, от крошечных мобильных экранов до огромных 4K-мониторов, вы можете себе представить, насколько сложно разработать сайт, который хорошо работает на всех этих разных экранах. размеры.

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

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

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

Я начал с изучения темы, найдя ее на Youtube. Я обнаружил это отличное видео от LearnCode.academy, где они шаг за шагом рассказывают, как преобразовать вашу веб-страницу из неотзывчивого дизайна в адаптивный.

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

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

Медиа-запросы

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

/* Media Queries */
@media screen and (max-width:900px) {
/* Main Containers */
html, body {
overflow-x: hidden;
}
body {
position: relative
}
.transparent-card {
min-width: 90vw;
padding: 10% 5%;
}

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

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

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

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

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

Затем вы можете использовать этот размер в качестве точки останова и соответственно добавить свои стили. После экспериментов я решил добавить точку останова на 900px и добавить новые стили к своим элементам в этой точке.

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

Сначала я расположил их горизонтально, чтобы использовать горизонтальное пространство на экране рабочего стола. Однако на мобильном экране горизонтальное пространство экрана ограничено, поэтому имеет смысл размещать элементы в вертикальном стеке.

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

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

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

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

Это не идеальный способ сделать это, но, как я уже сказал, эти изображения на данный момент были лишь заполнителями.

.profile-img {
width: 30vh;
height: 30vh;
}

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

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