What is responsive CSS

The use of Responsive CSS has become more popular over the last few years due to the demand and popularity of mobile devices. It allows you to design a website which will change scale and layout depending on a users device (Computer, Mobile and Pad). There are other ways of doing this such as PHP to detect the device (User Agent) and redirect to a different url or load a different devices specific CSS file. The problem with the latter has got more and more complicated with the amount of devices on the market.

So here is a simple little snippet of CSS code to get you started...

/* The generic styles */
.div-container {
    /* CSS rule goes here... */
}

/* VERSION 1 for iPad */
/* iPad [portrait] */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .div-container { 
        /* CSS rule goes here... */
    } 
}

/* iPad [landscape] */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    .div-container { 
        /* CSS rule goes here... */ 
    }
}

/* ... OR VERSION 2 for iPad */
/* iPad [detect both portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .div-container { 
        /* CSS rule goes here... */
    }
}

/* VERSION 1 for iPhone */
/* iPhone [portrait] */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
    .div-container { 
        /* CSS rule goes here... */
    } 
}

/* iPhone [landscape] */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    .div-container { 
        /* CSS rule goes here... */ 
    }
}

/* ... VERSION 2 for iPhone */
/* iPhone [detect both portrait + landscape] */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    .div-container { 
        /* CSS rule goes here... */
    }
}