Home > DeveloperSection > Articles > Responsive layout using CSS3

Responsive layout using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
1 Comment(s)
 4591  View(s)
Rate this:

Responsive layout using CSS3

In this article I am trying to explain how to make a responsive layout for different screens such as mobile phones, tablet or desktop PC.

 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.

Responsive layout using CSS3

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.

Responsive layout using CSS3


Good article!

By AVADHESH PATEL on   3 years ago
You have explained in good way.
Keep it up.

Don't want to miss updates? Please click the below button!

Follow MindStick