Now we have a service that can help us make a responsive design. In HTML we can set up the right class according to device or orientation or screen size. Because our service makes a subscription in the constructor that means it is ready to use. How to use our service? We need to put it in the provider section and inject it in the place where we want to use it. I think it also will be good to have a couple boolean functions like – Is the current device mobile? The only difference when we know a breakpoint type is that we parse breakpoint enum to define the device and orientation. The same we need to do with the device and orientation. To define screen size we need to make a subscription for all breakpoints screen sizes and match it. For sure we need to know the screen size, device type, and orientation.įirst, we need to create a couple enums to help us. Let’s think about what our service should do. ![]() Using a breakpoint service we can create a service that fulfills all our needs. Here is an example of how we can use a breakpointObserver service. The breakpoints list has everything that we need and from now on we do not need to write those media queries in CSS files. HandsetPortrait (max-width: 599.98px) and (orientation: portrait) HandsetLandscape (max-width: 959.98px) and (orientation: landscape) Handset (max-width: 599.98px) and (orientation: portrait), (max-width: 959.98px) and (orientation: landscape) TabletLandscape (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape) TabletPortrait (min-width: 600px) and (max-width: 839.98px) and (orientation: portrait) Tablet (min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape) WebPortrait (min-width: 840px) and (orientation: portrait) WebLandscape (min-width: 1280px) and (orientation: landscape) Web (min-width: 840px) and (orientation: portrait), (min-width: 1280px) and (orientation: landscape) When this specific value appears this service will notify us and we can make changes in styles.Īll those breakpoints have a specific media queries value. ![]() We can make a subscription for a special breakpoint value. The BreakpointObserver Service gives us the opportunity to detect the screen size, the device type, and even the orientation. Under the hood, it also uses media queries. Probably because of that, we can find a lot of frameworks that use media queries and make them friendlier for developers.Īngular also has a solution to make a web application responsive. ![]() If you use media queries you know they are not as convenient as we want. That means we need to define the screen size that we want to support and write those media queries everywhere where we need them. Media queries allow us to adjust the style for different screens. How can we make our application mobile friendlier? We all know about media queries.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |