CSS3 Media Queries

In the present days if you are a web developer, while developing, you need to concern about all the different screen sizes available in the market. There are hell lot of devices which are different screen resolutions creating a big headache for the developers. To accomplish this task generally what developers do is, using JavaScript and render different style sheets for different screen resolutions. But, still it's will become very big code and files become very large size. To avoid this there are Media Queries in CSS3. You just need to write them in your css file they will be written like this.

/*SmartPhone (Portrait and Landscape)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){

your styling goes here
}

/*SmartPhones (Landscape)*/
@media only screen and (min-width:321px){

your styling goes here
}

/*SmartPhones (Portrait)*/
@media only screen and (max-width:320px){

your styling goes here
}

/*Ipads (Portrait and Landscape)*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px){

your styling goes here
}

/*Ipads Landscape*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {

your styling goes here
}

/*Ipads Portrait*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {

your styling goes here
}

/*Desktops and laptops*/
@media only screen and (min-width:1224px){

your styling goes here
}

/*Large screens*/
@media only screen and (min-width:1824px) {

your styling goes here
}

I recommend you to research about them and learn more. If you don't want to use this there is another option out there that is BOOTSTRAP. Bootstrap is the Css and JavaScript library created by two employees in Twitter. This is the best option to create responsive webpages. you check out their documentation at www.getbootstrap.com