В последнее время я занимаюсь созданием личного веб-сайта для себя, чтобы продемонстрировать свои проекты и навыки. Сайт написан на Gatsby JS, и я получил массу удовольствия, используя начальный шаблон, чтобы выполнить задачу очень быстро, и все выглядело великолепно…. хорошо большой для моих ужасных глаз. Тем не менее, я столкнулся с интересной проблемой, которую решил изучить и найти решение. После создания и развертывания первоначальной сборки в моем домене я заметил, что мое изображение отбрасывало некоторые стили на область просмотра iPhone 7, поэтому я знал, что мне нужно найти решение… ввести медиа-запросы.
Что такое медиа-запрос?
Рассмотрим экраны на iPhone и ноутбуке MacBook. iPhone, как мобильное устройство, имеет гораздо меньшую область просмотра, в то время как ноутбук имеет гораздо больший экран, поскольку он предназначен для обеспечения идеального баланса между максимальным размером области просмотра и портативностью. Посмотрим правде в глаза, как бы нам ни хотелось везде носить с собой 50-дюймовый ноутбук, это просто неправдоподобно. Таким образом, медиа-запрос — это способ указать стилю вашего приложения, чтобы оно действовало/отображалось по-разному в зависимости от устройства, с которого к нему осуществляется доступ.
Применение медиа-запросов-
Допустим, вы пишете код, который будет использоваться на разных платформах и просматриваться в разных окнах просмотра. Конечно, мир, в котором вы живете, также является идеальным миром, поэтому очевидно, что, как и в идеальном мире каждого человека, у каждого человека есть и MacBook Pro, и iPhone 11. Поэтому вы заинтересованы в том, чтобы сосредоточиться исключительно на программировании для MacBook Pro и айфон 11. Вам нужен способ, чтобы ваш код отображался по-разному, когда он находится на каждом соответствующем устройстве.
Например, в вашем файле CSS для вашего кода вы, вероятно, указываете своим ‹h1›, как они должны отображаться. Естественно, как и все ‹h1›, они следующие: {font-size: 60px; красный цвет; вес шрифта: жирнее;}.
Однако теперь у вас как у разработчика много обязанностей в этом идеальном мире, и ваша работа еще не завершена. Вам нужно заняться стилем ваших ‹h1› на iPhone. Зная, что размер экрана на iPhone намного меньше, вам нужно будет уменьшить размер шрифта и, очевидно, цвет шрифта должен быть синим, потому что на iPhone он выглядит потрясающе. Используя медиа-запрос, ваш код будет выглядеть примерно так:
Выводы:
Медиа-запросы позволяют писать стили с логикой, аналогичной операторам if…else. Если вы думаете о том, что делает оператор if…else, то это просто способ сообщить компьютеру, как действовать, ЕСЛИ он видит одно, ИНАЧЕ он должен выполнить какой-то другой код. Медиа-запросы, хотя и не записываются как оператор if…else, следуют той же логике. Вы говорите компьютеру, как стилизовать себя, основываясь на какой-то характеристике (часто это размер области просмотра). Медиа-запросы, хотя они и не являются идеальным решением для написания кросс-платформенных приложений, очень полезны для создания иллюзии кросс-платформенной совместимости.
