CSS Media Queries as Browser Resizes?

Question

I think CSS media queries does not work as user resizes the browser? The user will have to refresh the page for the media query to take effect? How can I update the media query perhaps with JS? currently I use JS to detect window size on resize add addClass()

Answer 1

You don't need JS for MediaQueries to work or to detect the screen size/view port. Also, you do not need to refresh your browser for the result of a MediaQuery to take place.

Take a look at this article for detailed information and 'How to' for using MediaQueries:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Probably the easiest way to achieve this is to supply separate MediaQueries in the head of your HTML:

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" />

You can also use MediaQueries within your main stylesheet:

@media screen and (max-width: 350px) {  /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */
   .content{
       padding:6px;
   }
}

I would highly recommended taking the time to read through the above article to get a better understanding of MediaQueries. Once you understand how to best use them, you will find them invaluable!