twin light
Hello, I am not sure what is the right way to make pages responsive in Angular.
I created a service that all pages access and take which device is in question. I use BreakpointObserver but also @ media tag.
I'm not sure that's the correct way.
I would be very grateful for help.
worn pewter
Prefer @media in CSS wherever possible is what I would say. Use JS-based BreakpointObserver only as a last resort.
twin light
okay, i will try to refactor. Where can i post snippet of code?
worn pewter
Just inline (use code formatting) for short code, otherwise stackblitz or a Git repo
twin light
Okay
worn pewter
The advantage of using only css is that you don't have to alter the DOM (expensive) based on device size changes. It is also compatible with server side rendering (BreakpoingObserver only in a limited way, because the server has no idea about the device size)
twin light
Sure, thanks. Honestly, I will try to exchange everything tomorrow. It's late right now, so I have to sleep soon. I didn't think I would get an answer right away, so I asked the question now, with the hope that I would have an answer by morning. Thank you
worn pewter
There are also ways to make things responsive without explicit media queries. Such as flex-wrap, auto-columns with Grid or fluid font sizes (https://www.fluid-type-scale.com)
naive obsidian