Luke Wroblewski, author of popular web design books and a good reference for many articles, posted a recent device-sizes classification announced by technology companies as follows:
4"-5" smartphones
5"-6" phone / tablet hybrids
7"-8" tablets
9"-10" tablets
11"-17" laptops and convertibles (tablet/laptop)
20"-30" desktops
Labels such as smartphone are just friendly labels as long as we know that the responsive web design makes the structure respond to the device's screen resolution, not to the type of device. But, we must analyze if it is better to offer a different approach for a specific width. This is the improved feature of this module, where CSS2.1 was focused on media types such as print, screen, and handheld; in CSS3, the focus is on media features.
Media queries are mostly used and most browsers adopt it natively (Firefox 3.6 and above, Safari 4 and above, Chrome 4 and above, Opera 9.5 and above, iOS Safari 3.2 and above, Opera Mobile 10 and above, Android 2.1 and above, and Internet Explorer 9 and above). And now, here comes the question: what about IE6-IE8? For these browsers there is a known lightweight solution called Respond, which helps a lot when support for old browsers is needed (more in Chapter 10 , Ensuring Browser Support).
Trying to keep concise on this topic, the following are the features mostly used when we are specifying media queries:
Width:
min-width/max-widthHeight:
min-height/max-heightOrientation: It checks whether a device is portrait or landscape in orientation
Resolution: For example,
min-resolution: 300dpi
Check the following CSS code for a better understanding of the use of media queries and their syntax:
/* Standard desktop screens */
@media only screen and (min-width:1025px) {
CSS GOES HERE
}
/* Tablets */
@media only screen and (min-width:481px) and (max-width:1024px) {
CSS GOES HERE
}
/* Smartphones */
@media only screen and (max-width:480px) {
CSS GOES HERE
}Just to clarify this code, the following figure is a visual interpretation of this code, where it shows that the layout could be displayed in different ways depending on the device's screen:
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.