CSS Media queries when resizing a browser?

Question

I think CSS requests are not working as the user resizes the browser? Does the user have to refresh the page for the media request to take effect? How can I update a media query, possibly using JS? I am currently using JS to determine window size when resizing add addClass()

Answer 1

You do not need JS for MediaQueries to work or to determine screen size / view. In addition, you do not need to update your browser to get the result of MediaQuery.

Take a look at this article for details and How to use 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 provide separate MediaQueries in the HTML header:

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

You can also use MediaQueries in 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 recommend taking the time to read this article to better understand MediaQueries. Once you understand how to best use them, you will find them invaluable!