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()
-
3You don't need JS to do it. For example: simplebits.comthirtydot– thirtydot2011-03-03 22:28:04 +00:00Commented Mar 3, 2011 at 22:28
-
@thirtydot, Perfect example of MediaQueries in action!Dan– Dan2011-03-04 04:07:09 +00:00Commented Mar 4, 2011 at 4:07
Add a comment
|
1 Answer
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:
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!
