css3 Icon Logo
me@grafxflow

Written by me@grafxflow

18 Mar, 2013

1

1,982

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... */
    }
}

Add comment

1 Response

  1. avatar

    me@grafxflow

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

    stephen.io/mediaqueries/

Smart Search

119 Following
50 Followers

me@grafxflow

Hull, United Kingdom

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!

Follow