Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices, from desktop computer monitors to mobile phones. A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.The core principles of responsive web design include:
1. Fluid Grids:
The use of a fluid grid layout means that instead of designing a webpage with absolute units like pixels or points, the layout is designed in terms of proportions. For example, if a design has a sidebar that's supposed to take up 25% of the page and a content area that takes up 75%, those proportions will remain the same regardless of the screen size, thanks to the fluid grid.
2. Flexible Images:
Images and other media files are also sized in relative units (like percentages) so they can scale up or down within their containing elements. This ensures that images don't display outside their containing element, which can break the layout on smaller screens.
3. Media Queries:
CSS3 media queries allow the webpage to gather data about the visitor's device and apply different CSS styles based on the device's characteristics, most commonly its width. This means that the website can look different on a mobile phone than on a desktop computer, providing an optimal experience on both.