- Email:
[email protected]
Phone:
+918010117117
Introduction
Overview Understanding Themes Global Widgets Startup WidgetsGlobal Objects
ms ms.cart ms.user ms.page ms.device ms.substore ms.location ms.settings ms.variables ms.preferences ms.screen ms.routeParams ms.geolocation ms.productms.screen
ms.screen is used to determine the screen size and write code in your widget templates for different screens accordingly. It has different breakpoints. The default are:
| Size | Breakpoint (in px) |
| ms.screen.s_bp | 576 |
| ms.screen.m_bp | 768 |
| ms.screen.l_bp | 992 |
| ms.screen.xl_bp | 1200 |
| ms.screen.xxl_bp | 1400 |
| Size Variables | Description |
| ms.screen.xs | ms.screen.width < ms.screen.s_bp |
| ms.screen.s | ms.screen.s_bp <= ms.screen.width < ms.screen.m_bp |
| ms.screen.m | ms.screen.m_bp <= ms.screen.width < ms.screen.l_bp |
| ms.screen.l | ms.screen.l_bp <= ms.screen.width < ms.screen.xl_bp |
| ms.screen.xl | ms.screen.xl_bp <= ms.screen.width < ms.screen.xxl_bp |
| ms.screen.xxl | ms.screen.width >= ms.screen.xxl_bp |
| Size Up Variables | Description |
| ms.screen.s_up | ms.screen.width >= ms.screen.s_bp |
| ms.screen.m_up | ms.screen.width >= ms.screen.m_bp |
| ms.screen.l_up | ms.screen.width >= ms.screen.l_bp |
| ms.screen.xl_up | ms.screen.width >= ms.screen.xl_bp |
| Size Up Variables | Description |
| ms.screen.s_down | ms.screen.width <= ms.screen.s_bp |
| ms.screen.m_down | ms.screen.width <= ms.screen.m_bp |
| ms.screen.l_down | ms.screen.width <= ms.screen.l_bp |
| ms.screen.xl_down | ms.screen.width <= ms.screen.xl_bp |
For example:
ms.screen.xs will be true when the screen size is less or equal to 576px.
ms.screen.s will be true only when screen size is greater than 576px but less than or equal to 768px.
ms.screen.s_up will be true when screen size is greater than or equal to 576px
ms.screen.s_down will be true when screen size is less than or equal to 576px
Why we need ms.screen when we have css classes for different screen sizes
Generally, the developers use the classes provided by the CSS framework to show and hide the code. For example, Bootstrap provides col-sm-, col-xs- etc that automatically show and hide the content. But the entire HTML is still rendered and the DOM objects for the hidden content still stays which makes the page heavy. The ms.screen object completely removes the content from DOM and re-add the content it based on the conditions.