RWD is the acronym for Responsive Web Design, one of the terms that are gaining more prominence in web development environments. The professionals who today have not mastered techniques to make the site responsive end up having numerous problems, since the current market is fully directed to it.

Sites that were tested only in different resolutions today are also tested directly on different devices, thus ensuring the ultimate in compatibility.

Within the RWD, three pillars govern the concept:


Previously, it was very common to see the skeleton of the layout working with absolute values in its elements. This practice used to expedit production, but the applications used to get completely plastered in particular resolution. Gradually, this concept was deconstructing and relative values were gaining more strength. The growing demand of the mobile market was the protagonist for this practice, then, to discontinue once and for all.

The RWD is based on the use of relative values for any element. Thus, it will be possible to adapt the layout to the viewport, so that there are no breakages.

In order that the flexible foundation concept to work, it is necessary that the entire layout is developed with values in percentage. Therefore, using the percentage calculation rule becomes routine for professionals who develop front-end.


#div {width: 100%; }

#div .col {width: 50%; }

In the example, the first div will use the total value of the viewport and will appear from one end to another; but the class “col” will occupy only 50% of the space of #div.


Like any layout switches to percentages, in RWD it is required that the images are also adapted to this same format. Due to its importance, the processing of the images has become one of the pillars of RWD.

For that images fit and track layout, you must include the following statement in CSS:

img {max-width: 100%}

It will ensure that the maximum image size is no more than 100% of the total screen size. Thus, any image can be resized, thereby ensuring that the layout is not compromised.


This item comes for the endless possibilities of using CSS3. For a RWD layout to work, you must access important information related to the screen and device that is being used for access. To perform this query, simply use the combined @media rule with the following parameters:

min-width, max-width, min-height, max-height, aspect ratio, and operators such as and, and not only.


@media screen and (max-width: 1024px) {

/ * styles * /


After you create the rule, just then implement the styles. Thus it becomes easier to control all the elements and possible compatibility problems that may arise. The media query is now one of the main concepts applied to RWD, as it is from there that compatibility itself becomes effective.

Check out more content on our blog!
Learn all about Scriptcase.

By ,

June 19, 2015


You might also like…

“We have developed the Connected Citizen Card, which assists public administrators in decision-making and policy creation.”(Assist Soluções em TI)

Check below how Assist Soluções em TI used Scriptcase to modernize and streamline the development...

AI-Driven Software Development: The Role of ChatGPT

In the rapidly evolving world of technology, artificial intelligence (AI) is playing an increasingl...

Low-Code: The Key to Accessible Digital Transformation

Digital transformation is imperative for companies wishing to remain competitive in the current era...

You might also like…

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at Learn more about our Privacy Police.