CSS3 Media Query Tutorial – Make Your Existing Website Responsive

I have posted some weeks ago about the web design tips for responsive design-(LINK) , as many readers requeseted for an another version of the tutorial on responsive design am making this tutorial on media queries.Css3 Media queries Tutorial should be very common in web so am not going to say  just  how to use media query and other basic syntax.This will make you understand how to turn your existing website to a responsive one. Lets Begin!

media query

STEP1:

Add the view port meta tag , to make the viewport to fit the device width.

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />

STEP2:

This code could give you some basic idea how to turn your existing site responsive using media query.

BASIC HTML CODE:

 <body>
        <div id="wrapper">

            <div id="header">

                 <img src="logo.png" id="logo"/>

            </div>   

            <div id="content">

            </div>

            <div id="sidebar">

             </div>

        </div>

 </body>

Trick what iam going to use is makeing the wrapper to adjust its width based on the screen size of the device.Hence makeing it 80% of the desktops screen size initialy.

Now width of the content is made80% ( ie 80% width of the wrapper and not the screen).Giving the remaining 20% ( ie 80% width of the wrapper and not the screen) of the width to the sidebar.

STEP3:

Now lets add some media queries.

/*media quieris*/
@media screen and (max-width:600px)
{
    #sidebar
    {
	display: none;  
    }
    #wrapper
    {
	 width:100%
    }
    #content
    {
	width:100%;	
    }
}
/*media quieris*/

Just change #sidebars display to none when your screen size is less than 600px.Also we have to make the wrapper of the website and the content area to cover the entire width of the screen.Hence make that 100%(First content area is 80% and sidebar will be 20% width).

STEP4:

Add a menu bar.

HTML:

<div id="menu">
                <ul>
                    <li><a href="#">Stream</a></li>|
                    <li><a href="#">Lab</a></li>|
                    <li><a href="#">Projects</a></li>|
                    <li><a href="#">About</a></li>|
                    <li><a href="#">Contact</a></li>
                </ul>
  </div>

CSS:

The menu is made centered using text-align.

#menu
{

	text-align:center;
	border:1px solid #0f9ac8;
}

#menu li
{
	padding:10px;
	display:inline;
	width:90%;
	background-color:#0f9177;

}
#menu a
{
	text-decoration:none;
        text-height:10px;
	color:black;
	font-weight:bold;
}

Now the navigation bar for the smaller screens should be made like a list of options.It can be made by adding one line of css code in media query.

@media screen and (max-width:400px)
{
	#menu li
	{

		float:left;

	}

}

 

STEP5:

Now your website is almost responsive.You could check its reponsiveness.You will have some minor problems and alignment issues because of some large images used or haveing a large font size when viewed in mobile.

Hence you could solve these problems by adding this.

@media screen and (max-width:900px)
{
	h1
	{
		font-size:0.5em;

	}
        #logo
        {
               width:300px;
        }
}

For images there could be still more advancements like using a new file format that serves diffrent images for diffrent screen resoultion.Source-(LINK).This could be the best solution if your website has lots of images.

And its a good practice to add min-width for the input tags(Text box).

When text box is placed in a side bar of width 300px when the screen size is reduced , input tags width will not resize and to avoid this problem we should add this.

input
{
	min-width:100px;
}

And now you could view your site in mobile or in desktop to see its responsiveness.Look at the live demo below and its just a skeleton of a website and i made it responsive, for a simple example.Resize your browser to check its responsiveness.Since this tutorial is for  the basic understanding to know how to build a responsive  site ,I havent added any extra styles .You could add more styles for this skeleton of the website for better UI. If you face any new problems in changing your site responsive which i have not discussed above you could comment below.We could figure it out.

 

0saves
If you like this post, contribute us by sharing this in your network

, ,

Ver peliculas online