An important feature of websites these days with the advancement of smartphones is being responsive with device size. We nowadays not only worry about the various width of laptop or desktop, which don’t vary by a huge amount but also need to worry about tablets and phones which have a much lesser width. The website’s UI should not break and should be as easy to use on phones as it is on desktops/laptops. Using frameworks like bootstraps, Semantic-UI solves this problem to a large extent. But what if we need to modify certain parts by our own in case of mobile devices? How do we do that?

There are 3 main ways of getting a responsive UI:

• Using % or em instead of px wherever possible
• Using @media in css
• using window.screen.width in javascript

Using % or em instead of px

The first point is a generic approach that is not possible to use many of the times. So it is better to use % or em but it is not very helpful except for resizing things according to screen width. If one wants to change a menu to a drop-down in smaller devices, this method is of no use. This method is basically used by bootstrap and other frameworks for determining width of columns in their grid system.

Using @media in css

This is the most-widely used approach to make modifications for smaller devices. The general syntax for @media in css is something like this:

@media (max-width: 760px) and (min-width: 480px) {

/*Write you css code here*/

}

This code basically means that all the css codes written inside this block are executed if the width of the device is greater than 480px and less than 760px of resolution. So, if you want to convert a menu bar into a dropdown menu in smaller devices, you need to modify the css for the menu accordingly by mentioning the maximum width till which you want these css rules to apply. An example of code can be found here. Such similar approaches have been used in many of the elements in open event organizer’s server,such as in the Top Bar, Dashboard Tabs, widgets, etc.

window.screen.width in javascript

This method is generally not used unless you need to add some element through javascript and change some DOM elements. In that case this property comes handy. The window.screen.width returns the width of the window and thus it can be used to compare make changes. So, for example if you want some javascript code to be executed for a media device with a size less than 760px you would need to write :

if  ( window.screen.width < 760) {

//….write the code….

}

This will result in the code being executed only in mobile devices. For example the code for search button in top menu bar for mobile devices is done in a similar way.