In the old days of the web, it was common to design websites for specific resolutions. Websites would frequently have a badge saying "this site is best viewed in 800x600 resolution", or the like. Those days are gone, as the variety of devices accessing the web has taken away any possibility of standardizing for a specific screen size or resolution. Rather, web developers are now forced to cater for ANY possible screen size and resolution.
On mobile devices, in order to fit existing websites to the (usually) smaller screen of mobile devices, the mobile browsers have incorporated features that will automatically zoom the page. The browser acts very "intelligently", but by default almost never renders exactly what the designer wanted to. This is good for compatibility with existing websites, but not so good when developing new web applications.
We need to develop our applications to automatically adjust the design / appearance of the web app depending on the screen size where it is displayed. This is commonly referred to as Responsive Web Design.
A common technique in developing "responsive designs" is through the use of media queries:
A "media query" is a CSS module that allows content rendering to adapt to different display environments.
It uses the @media rule / statement in in CSS files to include a block of CSS properties only if a certain condition is true. This enables web designers / developers to configure alternative layouts depending on the characteristics of the screen / display.
