Helpcenter +918010117117 https://help.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" [email protected] https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India

ms.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:

SizeBreakpoint (in px)
ms.screen.s_bp576
ms.screen.m_bp768
ms.screen.l_bp992
ms.screen.xl_bp1200
ms.screen.xxl_bp1400

Size VariablesDescription
ms.screen.xs ms.screen.width <  ms.screen.s_bp
ms.screen.sms.screen.s_bp <= ms.screen.width < ms.screen.m_bp
ms.screen.mms.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.xlms.screen.xl_bp <= ms.screen.width < ms.screen.xxl_bp
ms.screen.xxlms.screen.width >=  ms.screen.xxl_bp

Size Up VariablesDescription
ms.screen.s_upms.screen.width >= ms.screen.s_bp
ms.screen.m_upms.screen.width >= ms.screen.m_bp
ms.screen.l_up ms.screen.width >= ms.screen.l_bp
ms.screen.xl_upms.screen.width >= ms.screen.xl_bp

Size Up VariablesDescription
ms.screen.s_downms.screen.width <= ms.screen.s_bp
ms.screen.m_downms.screen.width <= ms.screen.m_bp
ms.screen.l_downms.screen.width <= ms.screen.l_bp
ms.screen.xl_downms.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.