A majority of web designers and developers are incorporating responsive design into their new and existing projects. The need to create responsive designs is growing exponentially as more and more devices and browser sizes are being used to browse your website.
Using Media Queries
You can easily target various different devices or screen sizes using either multiple media queries or a more generic media query. I thought it would be handy of I listed a selection of media queries to help you target iPhones and iPads.
iPhone Media Query
@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* Your CSS */
}
iPhone 5 Media Query
@media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* Your CSS */
}
iPad Portrait & Landscape Media Query
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Your CSS */
}
Retina iPad Media Query
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
/* Your CSS */
}
iPad Mini Media Query
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {
/* Your CSS */
}
Sites Utilising Media Queries
Time to now go and play, take a look at these awesome responsive sites and have fun resizing your browser or viewing them on your mobile device.
The Great Discontent
Tilde
Modern Green Home
Printgram
Always Creative
Lotta Nieminen
Pocillo
Paravel inc
Trent Walton
Rally Interactive
Erik Ford
Bond Fire
Sagmeister & Walsh.
Designed To Move
Fly Wheel
Galão
Your Karma
Ink
Steve Zeidner
Hero
Lorenzo Verzini
Roy Barber
MATTHEW CARLETON
Otter Surf Boards
UNBORNINK
The post 25 Examples Of Responsive Website Design Done Right appeared first on Who Design Today.
