How to dynamically customize CSS stylesheet based on browser width?

Question

We are developing an open source web application for art teachers around the world to collaborate on. We need a good website that is simply customizable based on the active browser width, for example google.org or barackobama.com. It's good.

We can detect the browser, OS, etc., but do not want to use any information. We just need four or five different stylesheets that start when you adjust the width of the browser.

So, for example, when you visit an application in a browser using a DESKTOP computer, you see the full application when the browser is in full screen mode. Then, when the browser reduces its width, the site immediately and dynamically changes its format to provide universal compatibility.

We don’t want our CSS to change depending on the type of browser or the original width, but instead it should adjust every millisecond based on the current width of the viewport - whether it’s a “mobile” device or a “tablet” or “desktop” "browser.

Curiously, I use Google Apps Script to host our web application, so it looks like the meta widget tags are removed.

How can we enter four or five different stylesheets based on the width of the current browser window?

Answer 1

You can use CSS multimedia queries, for example:

<link rel="stylesheet" media="screen and (min-device-width: 700px)" href="css/narrow.css" /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> <link rel="stylesheet" media="screen and (max-device-width: 901px)" href="css/wide.css" /> 

Or jQuery, for example:

 function adjustStyle(width) { width = parseInt(width); if (width < 701) { $("#size-stylesheet").attr("href", "css/narrow.css"); } else if ((width >= 701) && (width < 900)) { $("#size-stylesheet").attr("href", "css/medium.css"); } else { $("#size-stylesheet").attr("href", "css/wide.css"); } } $(function() { adjustStyle($(this).width()); $(window).resize(function() { adjustStyle($(this).width()); }); }); 

Both are found from: http://css-tricks.com/resolution-specific-stylesheets/

Answer 2

Css media requests is the way to go

 <link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> <link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' /> 

Answer 3

Use CSS multimedia queries to do this

Answer 4

You can do with CSS.

 <link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobile.css' /> <link rel='stylesheet' media='screen and (min-width: 481px)' href='css/pc.css' /> 

For more detailed code and details

Click here