JS window size class
- Started
- Last post
- 7 Responses
- Beeswax
I'm currently setting up a website on wordpress and I thought maybe if I can find a way to Jquery to detect the browser size and add it as a class to body class I can write specific CSS for each of the screen size.
But I don't know Jquery that well...
- spmitch0
css media queries
- eflips0
Totally wrong guys, all you need is this WP/PHP function, I use it all the time. <body <?php body_class($class); ?>>
Details here: http://codex.wordpress.org/Funct…
- I didn’t read the whole question LOL. Media queries is right.
eflips
- I didn’t read the whole question LOL. Media queries is right.
- Hombre_Lobo0
Like spmitch said, it sounds like you're looking for. CSS media queries, like so -
@media only screen and (max-width: 48.75em) {
.eight-column {width:100%}
.project-thumb {width:45%;}
.nav {width: 80%;}
}(That's just some code scraped from a site I building)
The width element can use pixels or em (and others too).
I'd highly recommend you use em rather than pixels.Querying the width of a device in pixels, then displaying your content based on that information is difficult given different pixel densities on different devices.
If you use ems you will reference the base font size of that browser (usually 16) , then measure how many times that fits across the device, which will have a much better idea of what size elements should be on that given device.
Hope that makes sense!
- dbloc0
something of this nature....not sure if syntax is completely right.
setSizeClass = function() {
var winWidth = $(window).width();
$("body").addclass(winWidth);};
$(document).ready(function() {
setSizeClass();
});
- ernexbcn0
If you go the JS way to change the class of the body you should run the function not only on dom ready but also on window resize.
- Hombre_Lobo0
Also, don't forget the viewport meta tag, which (from my testing) is completely necessary when building responsive sites. I use -
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
But this also works the same -
<meta name="viewport" content="width=device-width, initial-scale=1">Both these tags disallow any type of zooming, so might not be helpful to you.
Here's some more info -
http://webdesign.tutsplus.com/tu…