How is it possible to change whole style in different devices?

I'm working on a web app using version 4 of Angular.

I want to show a different style for smaller devices and large screen devices. For example, when a user is browsing on mobile size device, the page will be very long which is not good in UX point, but it would be better if I could convert that long page to tabs that user can swipe between them (like menus). Is there any known way by bootstrap or any technique in Angular 4 to helps me for that?

1 answer

  • answered 2017-06-17 18:12 Jacob Desight

    You can use media query and either create a separate file for each:

    //index.html
    
    <link rel="stylesheet" media="(max-width: 360px)" href="mobile.css" />
    <link rel="stylesheet" media="(min-width: 361px) and (max-width: 1080px)" href="tablet.css" />
    <link rel="stylesheet" media="(min-width: 1081px)" href="desktop.css" />
    

    or create everything in one file:

    //style.css
    
    @media (max-width: 360px) {
      //Mobile
    }
    @media (min-width: 361px) and (max-width: 1080px) {
      //Tablet
    }
    @media (min-width: 1081px) {
      //Desktop
    }
    

    See also: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries