Switching CSS classes based on screen size
breakpoints, css, styles
Solution
Take a look at this https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.
Another way is to attach the resize event some piece of "switch code".
Something like this: http://jsfiddle.net/s5dvb/
HTML
<div id="body" class="limit400">
<h1>Hey :D</h1>
</div>
CSS
.limit400 h1 { font-size:10px; }
.limit1200 h1 { font-size:50px; }
JS
$(window).on('resize', function() {
if($(window).height() > 400) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}else{
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
About the frameworks, try http://purecss.io/ or http://getbootstrap.com/
Hope it helps.
Problem
CSS newby here... I'm looking at a responsive framework and imagining how I would accomplish different tasks. Based on the size of the screen, they have classes added to the body tag such as: .PhoneVisible, .DesktopVisible, etc... They also have classes to make links into buttons : .btn, small-button, med-button, large-button I'm puzzled on how you would go about changing your CSS. I.E. something like: ``` <a href="#" class="MyButtonOptions">XXXX</> .PhoneVisible .MyButtonOptions { btn small-button } .TabletVisible .MyButtonOptions { btn med-button } .DesktopVisible .MyButtonOptions { btn large-button } ``` Do you have to set the varying options individually? i.e. .PhoneVisible .MyButtonOptions { height:30px; } ? All advice appreciated!