1

I'm currently building a Progressive Web Application for Personal Study and I'm wondering about one thing which is included in most of modern PWAs. I thinking how to do a separate design of desktop and mobile in PWA. My idea was to done it within CSS Viewpoints but I'm not sure that's a great solution.

3
  • Do some reading up on "responsive web design". There are numerous css frameworks you can use instead of re-inventing the wheel.
    – charlietfl
    Sep 29, 2019 at 1:52
  • 1
    Basically, I have knowledge about Responsive Web Design and CSS Frameworks (Tailwind ftw.), but mainly my confusion is about usage of responsive web design in PWAs, is there an different way to implement or it's going through standard way by viewpoints. I would like to study building complete different mobile interfaces than desktop version.
    – keinsell
    Sep 29, 2019 at 2:00
  • 1
    Use a "mobile first" approach to creating the views. The fact is a PWA doesn't make the concepts any different than a regular site as far as layout/design works. This whole issue is easily researched
    – charlietfl
    Sep 29, 2019 at 2:14

1 Answer 1

0

I think you should use a mobile-first approach to creating views. Have a look at Material-UI library. It is one of the best solutions for styling the component and making responsive page-layouts. Also, it supports css and css-in-js styling solutions. As stated in the documentation

Material-UI is developed mobile first, a strategy in which we first write code for mobile devices and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your element.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.