Written by me@grafxflow
18 Mar, 2013
1
2,317
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... */
}
}
25 Mar, 2010
02 Aug, 2015
16 Oct, 2012
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!
Follow11 Jul, 2023
21 Jun, 2023
Views: 166,429
Views: 40,385
Views: 37,136
Views: 33,664
1 Response
me@grafxflow
18 Mar 2013
Here is a nice website which goes into much more detail regarding different devices and settings.
stephen.io/mediaqueries/