O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adapting the screen with media queries

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required