Screen Resolutions &
Responsive Design
Web developers now design for hundreds of devices across dozens of screen sizes. Here's what you need to know about resolutions, breakpoints, and building sites that work everywhere.
The days of designing for a single desktop resolution are long gone. Today's web spans smartphones, tablets, laptops, and large-format displays — each with its own pixel density, viewport size, and orientation. Building for all of them isn't optional. It's the baseline.
Modern frameworks and CSS techniques make this tractable. But it starts with understanding the landscape: what devices exist, what resolutions they use, and how to structure your layouts to handle all of it gracefully.
The Grid System
Frameworks like Bootstrap introduced a 12-column grid system that changed how developers approach layout. Rather than building separate versions of a site for different devices, you define how content should reflow across four breakpoint tiers — and the framework handles the rest.
The grid responds to the viewport width in pixels, collapsing or expanding columns automatically. A three-column layout on desktop becomes a single-column stack on mobile without a single line of custom media query logic.
.col-xs-*.col-sm-*.col-md-*.col-lg-*Screen Size vs. Resolution
These two terms are often used interchangeably, but they mean different things. Screen size is the diagonal measurement of the physical display in inches. Resolution is the number of pixels on that screen, expressed as width by height — for example, 1920×1080.
High-density displays complicate this further. A Retina screen may have twice the physical pixels of a standard display at the same size, meaning your images and assets need to account for device pixel ratios — or they'll appear soft on high-DPI screens.
Orientation adds another layer. Most mobile devices can rotate between portrait and landscape modes, and your layouts need to hold up in both.
Common Device Resolutions
Knowing the actual resolutions of widely used devices gives you a practical reference point when making layout decisions. The figures below reflect common screen configurations across major device categories.
Desktops & Laptops
1024×768 and above is the baseline. The 15-inch MacBook Pro with Retina display runs at 2880×1800 at 226 ppi — typical of high-DPI laptops that require 2× asset delivery.
Tablets & Netbooks
The standard netbook and tablet resolution sits at 1024×600. This covers devices including the Amazon Kindle Fire, Samsung Galaxy Tab series, and HTC EVO View 4G.
iPhone
iPhone 6 Plus: 1920×1080 at 401 ppi. iPhone 6: 1334×750 at 326 ppi. iPhone 5: 1136×640. iPhone 4S: 640×960. iPhone 3GS: 320×480.
iPad
First and second generation: 1024×768. Third generation: 2048×1536 at 264 ppi. iPad Mini: 1024×768. The jump to Retina on the third-gen iPad doubled the pixel count in both dimensions.
Android Phones & Tablets
Most Android phones are 320px or 360px wide. Tablets typically sit at 800px. Android groups devices by density-independent pixels (dp): small screens at 426×320dp, normal at 470×320dp, large at 640×480dp, and extra-large at 960×720dp.
Mobile First
Start with the smallest viewport and scale up. It forces layout discipline and ensures core content is always prioritised.
Use Relative Units
Prefer em, rem, %, and vw over fixed pixel values. Fluid layouts adapt without requiring a breakpoint for every device.
Serve the Right Assets
Use srcset and the picture element to deliver appropriately sized images. Don't force a 2880px image onto a 360px screen.
Test on Real Devices
Browser emulation is useful, but nothing replaces testing on actual hardware. Touch targets, font rendering, and scroll behavior all differ from what DevTools shows.
The Bottom Line
Responsive design is no longer a feature — it's the default expectation. Users don't distinguish between a desktop site and a mobile site. They just know when something works and when it doesn't.
Understanding the resolution landscape across device categories gives you the context to make better layout decisions from the start, rather than patching breakpoints after the fact.
Design for the content, not the device. A well-structured layout adapts naturally. A rigid one breaks on everything it wasn't explicitly designed for.
Resolution data sourced from manufacturer specifications. Bootstrap grid documentation available at getbootstrap.com.