В этом посте я покажу вам, как я использовал JS и styled-components для создания системы повторно используемых точек останова и запросов мультимедиа CSS для создания адаптивный дизайн со стилизованными компонентами — это весело и просто.

🤓 Посмотрите мой код для этого проекта на Github: https://github.com/tracywxu/recipe-app-plus

🥘 Проверьте вкусное приложение здесь: https://wuyan-recipes.vercel.app/

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

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

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

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

Медиа-запросы и контрольные точки CSS

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

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

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

Я сохранил свои медиа-запросы и точки останова CSS с объектом JavaScript в файле constants.js. Благодаря этому два объекта становятся повторно используемыми и становятся доступными для всех компонентов моего приложения. Я могу легко импортировать их, когда мне нужно, и использовать их со стилизованными компонентами.

Я также заметил, что при использовании подхода «сначала рабочий стол» для медиа-запросов используются max-width правила. Мои базовые правила CSS будут применяться к большим экранам по умолчанию, и я просто буду «модифицировать» этот базовый шаблон для экранов все меньшего размера.

Ниже приведен пример того, как я использую объект QUERIES в своем Sidebar component со стилизованным компонентом. Медиа-запросы упрощают скрытие боковой панели, когда размер экрана пользователя меньше размера планшета (1100 пикселей).

Я обнаружил, что наличие объектов QUERIES и BREAKPOINTS значительно упрощает работу с медиа-запросами и адаптивным дизайном. Надеюсь, вам понравились эти советы, и вы сможете использовать их в своих проектах. 🧞‍♂️