Разделенный дизайн между настольным компьютером и мобильным компьютером в React.js PWA

Question

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

Answer 1

Я думаю, что вы должны использовать мобильный подход для создания представлений.Взгляните на библиотеку Material-UI.Это одно из лучших решений для стилизации компонента и создания адаптивных макетов страниц.Кроме того, он поддерживает решения для стилей CSS и CSS-in-js.Как указано в документации

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

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>