The traditional means for Breakpoints in Responsive Web Design is the browser/device widths that have a media query declaration to change the layout once the browser is within the declared range.
Usually there is a fixed number of breakpoint relatives to a fixed number of devices of interest. Using responsive.js you will be able to control more breakpoint point than manual css coding work.
There is many tools based on interpolation, functions, dynamic template rendering to help you to make your site responsive for each value of width from a min value to a max value.
But we also let you set some rules for traditional few breakpoints points and to define a "standard" set of breakpoints used by the r$ methods. You can achieve this with following code :
r$.breakpoints(300,480,800,1200,1600);
r$.breakpoints([300,480,800,1200,1600]);
It is possible to call the "breakpoints" methods also as an infinite parameters functions or a single array parameter.
For retrive the current breakpoints array you can call the "breakpoints" methods without any parameter.
| Resolution | Type | Device using this resolution |
|---|---|---|
| 320 x 240 | QVGA | Blackberry Curve Samsung Tocco HTC Wildfire Nokia E71 Very common low res |
| 400 x 240 | WQVGA | Many generic feature phones including: Samsung Star & Star II |
| 480 x 320 | HVGA | Apple iPhone 3G & 3GS Apple iPod touch (1st, 2nd & 3rd generation) BlackBerry Bold 9000 Samsung Galaxy Ace LG Optimus One HTC Desire C |
| 480 x 360 | BlackBerry Curve, Storm, Torch 9800 & Bold incl. 9700 Sony Ericsson Vivaz |
|
| 640 x 360 | nHD | Nokia N8, N97, E7 and X6 amongst others |
| 640 x 480 | VGA | Blackberry Bold 9900 & Torch 9810 |
| 800 x 480 | WVGA | Samsung Galaxy I, II and S Samsung Nexus S HTC Desire, Desire HD, Desire S & Desire X HTC Evo HTC Sensation XL HTC One V BlackBerry Torch 9860 Blackberry Storm 3 Nokia Lumia 800 & 900 Viewsonic Viewpad 7 LG Optimus 2X & 3D |
| 854 x 480 | FWVGA | Sony Ericsson Xperia Arc, Arc S, X10, J & U Nokia N9 Motorola Milestone and Milestone 2 Sony Xperia J |
| 960 x 540 | qHD | HTC Sensation HTC Evo 3D Motorola Bionic, Atrix & Droid RAZR Motorola RAZR i & Photon Q HTC One S |
| 960 x 640 | DVGA | Apple iPhone 4 & 4S Apple iPod Touch (4th generation) |
| 1136 x 640 | Apple iPhone 5 Apple iPod Touch (5th generation) |
|
| 1024 x 600 | WSVGA | Standard netbook/tablet resolution includes: Amazon Kindle Fire Blackberry Playbook Viewsonic Viewpad 10 Samsung Galaxy Tab |
| 1024 x 768 | XGA | Apple iPad 1& 2 HP TouchPad Apple iPad Mini |
| 1280 x 720 | HD/WXGA | Samsung Galaxy Nexus Sony Xperia S High resolution netbooks such as Acer Aspire One 522 Samsung Galaxy S III Samsung Galaxy Note II Motorola DROID RAZR HD & MAXX HD HTC Windows Phone 8X & 8S HTC One X & X+ & XL |
| 1280 x 768 | WXGA | Samsung Galaxy Tab 10.1 Nexus 4 Nokia Lumia 920 LG Optimus G & LG Optimus 4X HD |
| 1280 x 800 | WXGA |
Samsung Galaxy Tab 7.1 & 8.9
Samsung Galaxy Note
ASUS Eee Pad Transformer & Transformer Prime
Sony Tablet S
Motorola Zoom
Nexus 7 Kindle Fire HD |
| 1280 x 1024 | SXGA | Standard 4:3 desktop screen resolution |
| 1366 x 768 | WXGA | 11.6 inch Apple Macbook Air ASUS Eee PC VX6 Lambourghini Samsung N350 Small 16:9 desktop/laptop screen resolution Microsoft Surface with Windows RT Samsung Series 3 Chromebook |
| 1440 x 900 | WXGA+ | 13.3 inch Apple Macbook Air Medium 16:10 desktop/laptop screen resolution 17-inch Apple iMac 4,1 / 5,2 (Early 2006 - Late 2006) Barnes & Noble NOOK HD |
| 1600 x 900 | HD+ | 13 inch Apple Macbook Air Medium 16:10 desktop/laptop screen resolution |
| 1600 x 1200 | UXGA | Large 4:3 desktop screen resolution |
| 1680 x 1050 | WSXGA+ | 20-inch Apple iMac 4,1 / 5,1 / 7,1 / 8,1 / 9,1 (Early 2006 - Early 2009) |
| 1920 x 1080 | FHD | Large 16:9 desktop screen resolution 21.5-inch Apple iMac 10,1 / 11,2 / 12,1 (Late 2009 - Mid 2011) Microsoft Surface with Windows 8 Pro |
| 1920 x 1200 | WUXGA | 24-inch Apple iMac 6,1 / 7,1 / 8,1 / 9,1(Late 2006 - Early 2009) Asus Transformer Pad Infinity |
| 2048 x 1536 | QXGA | Apple iPad 3 |
| 2560 x 1440 | (W)QHD | 27-inch Apple iMac 10,2 / 11,1 / 11,3 / 12,2 (Late 2009 - 2012) |
| 2560 x 1600 | WQXGA | 13-inch Apple MacBook Pro with Retina display Nexus 10 |
| 2880 x 1800 | 15-inch Apple MacBook Pro with Retina display |