Blog

18 Mar
2013

css3 Icon Logo

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... */
    }
}
Posted in: < PHP and HTML and CSS >
me@grafxflow avatar

me@grafxflow


I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Visitors also viewed these posts

1 Thoughts

  1. 18 Mar
    2013

    avatar

    me@grafxflow

    Here is a nice website which goes into much more detail regarding different devices and settings.

    stephen.io/mediaqueries/

Add comment

Add comment