Is there an alternative to media queries for responsive design?

Yes: use percentage measurements for your layout components. That way you can build a website that works on a much larger range of screen sizes. You can combine this approach with media queries - for example, you could specify that your site has a 25% wide navigation menu and a 75% wide content area on devices that are wider than 400px, but any smaller than that and it collapses to a single column layout with the menu hidden and accessible only through a menu bar icon.

Responsive design isn't just about media query break points. The other key component is liquid layout – in other words, layout and design elements that stretch proportionately to fit the available space (eg. by defining column widths as percentages rather than pixels). By intelligently combining the two, you can get some great results that adapt to a very wide range of screen sizes without going nuts with break points.

Yes there are alternatives however in the grand scheme of things there is simply no better alternative to media queries. I think the best analogy I've come across is one from a talk by Alex Sexton where he compares websites to TVs. To (very briefly) paraphrase, old TVs can only handle black and white and so present viewers with black and white. Newer TVs however can support colour and so viewers get a better picture, some of them are huge and some of them are HD, the point is they give the best possible picture to viewers. It would be silly therefore to view a website on a 4K 63" Super Deluxe Pro Mega Screenâ„¢ and be given a black and white page. This is part of the solution media queries provides us. If you were to start developing a website for a "black and white TV" it would have the bare essentials to display its content. This black and white TV could (and for the sake of this answer let's pretend it is) be an old mobile phone that is around 2 or 3 inches wide where the content of the website can only go one column wide. Then as the screen gets a little wider you notice the content would look better with two columns, so you drop a media query in here for whichever elements change to two columns and carry on. As others have pointed out, this isn't at 400px where you think mobile phones are or even at 760px which is roughly where tablets are, this is where your layout should change based on your design and your content. I won't carry on but I hope you get the idea. There's a whole heap of other things that add towards Progressive Enhancement and media queries ( which deal with styling and therefore layout ) is just one of them. As has pointed out percentage measurements go hand in hand with media queries, setting things to be 100% of the size until the screen gets bigger and gives you more space so you can put things in side by side with a media query setting it to be 50% of the width. There are a few alternatives to media queries, however media queries are the cheapest* and most efficient* way of dealing with layout changes. Let the browser work out how wide it is and apply the necessary styles laid out for that width from your CSS. Using other alternatives I've found that, whilst my modern laptop with my modern browser can handle around 2,000 calculations to determine its width as I scale a site in, the old PC with IE8 I use to test sites with just can't handle that and sites feel slow and sluggish ( or, my 3D film starts to look blurry on a black and white TV ). Finally I also want to point out my "aha" moment in terms of set media queries; A while ago I was checking through the analytics of all of our websites ( as you do ), specifically looking at mobile usage when I noticed something that kind of freaked me out a little. On average, the 3rd most popular device that people accessed our websites from was: Unknown Device I have absolutely no idea how big these things are! Whilst the iPhones, iPads, Galaxy SII/III and Nexus tablets were all pretty familiar to me, the 3rd most popular devices could have included an iWatch, some Google Glasses or a Tweeting Fridge, the point is we can't work to set widths and sizes and have to start utilising media queries and percentage widths to accommodate for these unknown devices. I also read a great line somewhere on the internet that said: Let a lack of support for media queries be your first media query. Further Reading/Stuff http://alistapart.com/article/responsive-web-design - Ethan Marcotte http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-17070713 - Brad Frost http://alexsexton.com/talks/modernizr-3-workflow/ - Alex Sexton ( where the TV stuff came from ) http://css-tricks.com http://mediaqueri.es *In terms of computer processing.

Media Queries gives you freedom to change the layout at certain points. Think it this way: You have your website open at the highest resolution of your desirable range. Now decrease the width slowly. At some point, you see the layout look bad and want to change the layout. There comes media queries. Till you need a breakpoint, you were still narrowing your browser, so what do you do? There comes percentage, em and similar methods. You can make the layout fluid between two breakpoints. Also, see for more on that.

I'm not sure what you're doing exactly. This is not Stack Overflow, so I can't ask you for your code. Most probably you're not using media queries correctly. :) If you combine media queries with percentage based measurements, then most designs require only 2 or 3 breakpoints. Keep the below points in mind when building a responsive design: 1. Use breakpoints to make switches in designs i.e. switching from a horizontal button menu (for wider screens) to a drop-down menu (for smaller screens). 2. Anything in between the breakpoints will be handled by the percentage measurements.

An alternative to media queries, which only take the viewport width into account, is javascript.  E.g. the Responsive Elements library: https://github.com/kumailht/responsive-elements Using this library, you add CSS classes to HTML elements to indicate how their computed width compares to certain breakpoints.  E.g. "gt350".  Then you use this in combination with relative sizes to create a few layouts for this element (maybe a horizontal one and a vertical one).  If for any reason the width of the element changes (could be due to browser resize, but also dynamic content that gets hidden/shown), the appropriate CSS classes will be applied and the layout of all elements adapted. This allows for a more component-based approach.  Web development is becoming more and more component-based.  See e.g. Web Components standard, Angular 2, Vaadin, ...

You can't design around breakpoints without driving yourself crazy, every new device will require a new breakpoint. Instead design around content, look into the http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/ &http://goldilocksapproach.com/article/.