How to write 'responsive javascript' when CSS3 media queries is not available?

Question

I need to make sure my page looks good in different screen sizes. The best solution is probably CSS3 media queries.

However, a large part of my target user base are still using IE <= 8. I plan to write some js to re-style elements (font-size, etc) based on window size when page is loaded. What is the best way to do this?

Is there any existing solid solution to this problem (A git repo)?
Should I use:
- javascript for IE<8 + media queries for other browsers, or
- javascript code for every browser?

why not use respond.js?

Kippie
– Kippie

2014-04-11 09:39:41 +00:00
Commented Apr 11, 2014 at 9:39 — Kippie
– Kippie, Commented Apr 11, 2014 at 9:39
Search for adapt.js in google. you might get your answer.

Atal Shrivastava
– Atal Shrivastava

2014-04-11 10:29:27 +00:00
Commented Apr 11, 2014 at 10:29 — Atal Shrivastava
– Atal Shrivastava, Commented Apr 11, 2014 at 10:29

algoni · Accepted Answer · 2014-04-11 10:49:04Z

1

Using respond.js together with Modernizr to load it is a simple enough solution. When using Modernizr you don't need to ship the poyfill for most of the Internet (modern browsers), and only load it for the old ones. Example:

Modernizr.load({
  test: Modernizr.mq('only all'),
  nope: ['respond.js']
});

Basically what respond.js does is add support for media queries to old browsers, so you can write responsive CSS and it will "just work" on old IE.

answered Apr 11, 2014 at 10:49

algoni

6353 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NeoWang Over a year ago

I am not using modernizr (maybe I should). Using it just for adpating some css is a bit heavy-weight. I might try 'if IE' conditionals along with respond.js (or adapt.js) for this first.

algoni Over a year ago

Using respond.js alone is perfectly fine - the only downside is that users with modern brosers need to download the polyfill, even though they don't need it.

James Ellis-Jones · Accepted Answer · 2014-04-13 16:54:26Z

1

You might also like a look at this jquery responsive plugin. Its a very lightweight plugin that manages the whole reflow problem on all browsers, making the CSS you need to write much less.

edited Apr 13, 2014 at 16:54

answered Apr 13, 2014 at 13:37

James Ellis-Jones

3,11223 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to write 'responsive javascript' when CSS3 media queries is not available?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related