Disadvantages of modifying layout based on screen width as detected by javascript

Question

I want a web site I'm designing to work well with the most common screen resolutions, and I'm considering the following way of accomplishing that goal.

-Design css classes appropriate to each resolution (specifying properties like width and position).

-Code HTML with elements styled using css classes appropriate to default resolution.

-Detect screen width using javascript (screen.width property).

-If the detected width is close enough to a more suitable resolution, use javascript to dynamically remove all css classes appropriate to default resolution and replace them with css classes appropriate to more suitable resolution.

Are there any major problems with this approach?

Answer 1

Don't do it as you wrote in your question. There's an easier solution.

Use media queries , and a JavaScript polyfill to make it work in browsers that don't have native support.

I like Respond.js .

Answer 2

The golden rule is: never use Javascript to style webpages. There are some exceptions where you can use JS to build a dynamic UI/layout usually for complex applications, but whenever possible, avoid it.

Create a SINGLE set of CSS rules that work with all resolutions. You can use media selectors if you want to target extreme resolutions like mobile etc, but for all other cases use a single layout.

Answer 3

http://cssgrid.net/

Media queries as noted above work great!

Answer 4

If you're worried about javascript not working, here's an alternate solution than using media queries. Sometimes To do what you want you have to change The HTML. And media queries does not do that. You can link to a totally new HTML page with the code below.

 <link rel='stylesheet' media='screen and (min-width: 301px) and (max-width: 550px)' href='css/style300.css' />
    <link rel='stylesheet' media='screen and (min-width: 551px) and (max-width: 1024px)' href='css/style600.css' />
    <link rel='stylesheet' media='screen and (min-width: 1025px) and (max-width: 1920px)' href='css/style800.css' />