Copy Paste Media Query Breakpoint Generator

Select the devices you wish to target with your media queries. Then copy/paste the media queries into your css file.

This CSS Media Query Generator operators on the principle of Progressive Advancement. Progressive Advancement means that when we design a website, we first create a version for smaller devices with less real-estate (like a mobile phone). This version includes the most basic functions & features. After that, we create more advanced versions for a tablet, laptop, and desktop. These are created by adding more more complicated effects and interactions for larger screens and different devices.

More on the concept of Progressive Advancement can be found here.

Simple elegant tools.
Find it useful? Send me a tip on ChangeTip or PayPal!

by e. james ford