Responsive layout (Responsive Web Design)is a web design approach objective at crafting sites to give a finest presentation experience of a website with the responsive layout make a website easy to reading and navigation with a least of resizing, panning, and scrolling—across a broad range of devices (such as desktop computers monitors to mobile phones).

With the uses of CSS3 media queries we can create a website with Responsive layout, a prevalence of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.

•  Media queries provide the different CSS style rules on the basis of device characteristics means the site is being displayed on width of the browser.
•  The fluid grid concept calls for page element sizing to be in relative units like percentages or ems, rather than absolute units like pixels or points.
•  Flexible images are also size in relative units (up to 100%), so as to prevent them from displaying outside their containing element.

Below, I have given an example of Responsive layout or Responsive Web design. In this example I’ve tried to explain how to create and make more flexible layout for different types of screen such as mobile, desktop, ipad , iphone etc.

Style.css:-

<style type="text/css">

        #div1

        {

            background-color: #CD853F;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }

        #div2

        {

            background-color: #CD853F;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }

        #div3

        {

            background-color: #CD853F;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }

        #div4

        {

            background-color: #CD853F;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }

        #div5

        {

            background-color: #CD853F;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }

        #div6

        {

            background-color: #CD853F;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }

        p.format

        {

            text-align: center;

            vertical-align: middle;

            color: White;

            font-weight: bold;

        }

        #div7

        {

            clear: left;

            height:100px;

            width:150px;

        }

        @media all and (max-width:850px) <!--This line execute when our screen resolution is less than 850px or resize the browser window-->

        {

            p.format

            {

                text-align: center;

                vertical-align: middle;

                color: White;

                font-weight: bold;

            }

            #div1

            {

                background-color: #CD853F;

                height: 100px;

                width: 100px;

                border: 1px solid black;

                float: none;

                margin-left: 10px;

                margin-top: 5px;

            }

            #div2

            {

                background-color: #CD853F;

                height: 50px;

                width: 100px;

                border: 1px solid black;

                float: none;

                margin-left: 10px;

                margin-top: 5px;

            }

            #div3

            {

                background-color: #CD853F;

                height: 50px;

                width: 100px;

                border: 1px solid black;

                float: none;

                margin-left: 10px;

                margin-top: 5px;

            }

            #div4

            {

                background-color: #CD853F;

                height: 50px;

                width: 100px;

                border: 1px solid black;

                float: none;

                margin-left: 10px;

                margin-top: 5px;

            }

            #div5

            {

                background-color: #CD853F;

                height: 50px;

                width: 100px;

                border: 1px solid black;

                float: none;

                margin-left: 10px;

                margin-top: 5px;

            }

            #div6

            {

                background-color: #CD853F;

                height: 50px;

                width: 100px;

                border: 1px solid black;

                float: none;

                margin-left: 10px;

                margin-top: 5px;

            }

            #div7

            {

                top: 0px;

                right: 5px;

                position: fixed;

            }

       

        }

    </style>

 HTML Code:-

<body>

    <div id="div1">

        <p class="format">

            mindstick&copy;</p>

    </div>

    <div id="div2">

        <p class="format">

            mindstick&copy;</p>

    </div>

    <div id="div3">

        <p class="format">

            mindstick&copy;</p>

    </div>

    <div id="div4">

        <p class="format">

            mindstick&copy;</p>

    </div>

    <div id="div5">

        <p class="format">

            mindstick&copy;</p>

    </div>

    <div id="div6">

        <p class="format">

            mindstick&copy;</p>

    </div>

    <img id="div7" src="http://www.mindstick.com/Employeesection/Image/Multi_purpose.png"

        alt="mindstick" />

</body>

Code clarification:-

In above CSS file I am managing the layout for different size of resolution and in above html file I have six div with 100px height and 100px width in left float but when I resize our browser window less than 850px then CSS will be changed with float property value none and last five div are height 50px and width 100px.

Output:

When browser size or screen resolution is greater than 850px, now here div height and width is 100px and float property value is left.

When browser size or screen resolution is less than 850px, here div height is 100px and width is 50px and float property value is none.