How can I support different screen sizes with different stylesheets in Angular?

Question

I am using Angular 5 and I am currently making a header, when I resize the screen to mobile resolution the design becomes very ugly. My idea was making two different stylesheets, one for mobile and one for PC like so:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Is this a smart way to resolve the issue? If not, please give me an alternative.

Besides this, where do I put the stylesheet link in Angular? Normally it is put in the index.html but in Angular styles are listed in the component.ts file, here i can not do the media="screen and (min-device-width: 800px)" part, so again, how can i resolve this?

Answer 1

In your .angular-cli.json file you should add a string to apps.styles array.

For example when your mobile.css and tablet.css resides inside the app folder just add: mobile.css and tablet.css.
When the styles reside inside for example a styles folder (inside app), add: styles/yourstyle.css

Corresponding to your css file you add the media queries.

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

You don't need to add the style links inside the index.html.