0👍
I suggest that you stop thinking of browser / PC layout and mobile apps as being different. As it looks, you can’t be sure what form factor’s going to come next for both of them. That’s true even for platforms that have been proven to be consistent, such as iPhone / iOS.
Responsive web design is the same in both environments, your layouts should be ‘prepared’ for a change in form factor.
Responsive web design is not different from React to Angular or anything in between. The only thing that differs is how CSS actually gets in your app.
No matter what you’re designing for, you should:
Respond to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device.
The basic principles are: Adapt, respond, and overcome.
Technical perspective
In Vue the way to go is: isolate components, including styles -> use scoped styles whenever possible <style scoped></style>.
Then (not specific to Vue), use fluid layouts however you want; some people choose %, some use vh / vw or em / rem. As long as it’s fluid, you’ll probably be fine. Many choose vh / vw for containers and use percentages afterwards, but there’s no default pattern. With percentages, some people find it easier to mix in calc(), which can be a useful responsive tool.
Regarding your button example, it’s probably a good idea to use rem or em as a default. However, for some components it might make sense to use px – don’t be afraid to mix and match. This can save you a lot of code and there’s no golden rule about it.
Your breakpoints shouldn’t be shaped after devices, instead figure out where your content can be presented better. This way you’ll build a more future-proof layout, which can turn out to be a nightmare to maintain.
Choose whatever makes you feel comfortable.
It’s up to you to combine your tools and get the CSS to work for you / follow certain RWD patterns.
Wrap up
That being said, here are some patterns you can follow when building your responsive apps:
- Mostly Fluid
- Column Drop
- Layout Shifter
- Tiny Tweaks
- Off Canvas
There’s a course I encourage you to take if still in doubt.
In this course you’ll learn the fundamentals of responsive web design with Google’s Pete LePage! You’ll create your own responsive web page that works well on any device – phone, tablet, desktop or anything in between. It might feel a bit slow in the beginning, but you’ll learn a lot by the end of it.