For easier development using media queries, we have to transform the fixed sized layout to a fluid one which will take advantage of percentages instead of pixels and as a result the layout will always shrink and grow based on the browser size or display resolution. The font size will also be specified in em’s (similar with %) so it will zoom automatically.
CSS3 Media Queries enable us to use conditionals depending on resolution. For example we can specify something like this: if browser’s width is 480px or smaller than hide sidebar and/or make the navigation horizontal.
Please see below how the next website behaves when it’s viewed at different browsers widths or resolutions: http://webdesignerwall.com/
Responsive designs would not always benefit all website owners and investing extra in this feature does not makes sense in all cases. However, certain business owners can greatly improve the browsing experience of their users. If a significant percentage of the visitors are browsing using mobile devices, providing them with an easier way to access the content could lead to higher profits.