Complete Media query to make your site responsive

The code below helps your site to fit in different screen sizes. we can find various media queries when we google it, among all those codes i feel these to be the most appropriate and easy to use.


//for larger screen ie large desktops
@media only screen and (min-width: 1200px) and (max-width: 1440px) { 

}

//for medium screen 15inch laptops
@media only screen and ( min-width: 992px) and (max-width: 1024px) { 

}

//for small size laptops ie 13inch laptops
@media only screen and ( max-width: 960px ) { 

}
//for ipad and tablets
@media only screen and ( min-width: 768px ) and ( max-width: 960px ) { 

}

//for mobiles either horizontal orientation or large size mobiles
@media only screen and ( max-width: 767px ) { 

}

 //for mobiles or vertical orientation
@media only screen and ( max-width: 479px ) { 
}


Advertisements