Responsive web design (RWD) is a design and technical approach that aims to adapt the layout and interaction of a site or app to work optimally across a wide range of device resolutions, screen densities and interaction modes with the same underlying codebase.
RWD basics
RWD has three key elements:
- CSS media queries, used to target styles to specific device characteristics such as screen width breakpoint or resolution.
- A fluid grid, that specifies elements and widgets in flexible units with the goal of making them flow to fill their containers.
- Flexible images and media, are also sized in relative units so they re-size to fit within their containers.
By creating all screen elements to be fluid and flexible, it allows the media queries to focus primarily on controlling layout rules for containers; the modules inside simply re-size to fit their containers.
A simple responsive example may be two stacked containers, each with flexible content or widgets inside. At greater widths, media queries are used to float both containers to create a two column layout to take better advantage of the wider screen.
Since the content inside each container is designed to re-flow to fit its parent, the media queries can focus just on the rules for making the columns stack or float, and to override or add styles only needed at greater widths.
—
Order your responsive web design now from KAV Design at info@kavdesign.net or just call us at +359 898 884431
