Responsive layout using page media
Today I am going to show you how to make website responsive using page media. For doing so you need to understand the screens width of different device like mobile,Tab, Etc. Below is the table of content which specifies various screen width of various devices.
/* Table of Contents
==================================================
#Mobile – 240px
#Mobile – 320px
#Mobile – 480px
#Tablet – 768px
*/
/* #Mobile – 240px
================================================== */
@media only screen and (min-width: 320px) and (max-width: 479px) {
.aman{
width:300px;
height:50px;
background:yellow;
}
}
/* #Mobile – 480px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.aman{
width:460px;
height:50px;
background:blue;
}
}
/* #Tablet – 768px
================================================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.aman {
width:748px;
height:50px;
background:red;
}
}
/* #Screens Bigger than – 1280px
================================================== */
@media only screen and (min-width: 1281px) {
.aman {
width:970px;
height:50px;
background:#ccc;
}
}
Now adjust your CSS into those area according to your need. You can use firebug for firefox to navigate element and set there properties according to devices.
That’s it. It’s too easy but sometimes it may take time to adjust various devices.