Responsive Web Design (often abbreviated to RWD) is a particular technique of Web design for the creation of websites in which
the pages automatically adapt their own layout to provide optimal viewing for the environment in which are displayed.
(on desktop pc with different resolutions, tablets, smartphones, cell phones older generation, Web TV)
A site designed with RWD uses CSS, and in particular, media queries, to adapt the layout at the environment in which it is displayed, using proportional fluid grids, flexible images, and some ?pure? css framework.
Media Queries allows the page to use sets of CSS rules depending on some characteristics of the device on which they are displayed, most commonly the width of the viewport, as for example for pc relatives to the browser window in which the page is displayed.
The fluid grid concept calls for page element sizing to be in relative units like percentages or Ems or REMs, rather than absolute units like pixels or points, to obtain a sort of ?automatic? adapting of the content when page size changes.
Many CSS frameworks provide a set of classes for flexible grids that allow the realization of responsive templates, very quickly, based on concepts of row class and many columns class adapting them, usually, to a single point of breakpoints.
A breakpoint point is a value of horizontal resolution that establishes a difference between the ways content is displayed when resolution is greater or less than it is. It is therefore possible to divide the set of values of the resolutions in many subsets for which have different views of content.
For example, if we simply change the background color of the body of the page to a breakpoint point of 767px we have:
@media only screen and (max-width:767px)
@media only screen and (min-width:767px)
The media queries ?min-width? and ?max-width? are the most used in RWD and allows you to divide the "world" of the resolutions in many subsets
and not only the use of a single breakpoint point. There are many different resolutions for many different devices and the management of each of them requires a too high
effort by designers for handling all.The design process and testing of various media queries are rather onerous in terms of time and often results as big css files with many repetitions for setting
different styles for different breakpoints. The maintenance of a website can become very difficult in the case of many different templates and styles.
It is useful in some situations but it would be better to use css to styles elements in all the situations when it is possible.
Responsive.js (aka r$) proposes an alternative solution to this, allowing you to use the concept of native CSS media queries in combination with the dynamic nature of
r$ models the problem of RWD as binding a css properties of an element with a function dependent on the width of the device-browser.
(example having from 200 to 500 11px, 12px from 600 to 800, etc.).
Learn more reading the Wiki
If you think that this library helped you or you wanna contribuite to future developement you can make a free donation.
It is appreciate if you use this library for commercial use to contribute for maintenance of this site and library with a donation.
Thanks in advance.