Switching CSS classes based on screen size
Solution 1
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.
Solution 2
CSS Media Queries are definetly the way to go.
You can easily separate your CSS based upon the browser size, pixel density, etc.
Here's a list of examples from CSS-Tricks.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
FatFingers
Updated on July 09, 2022Comments
-
FatFingers almost 2 years
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!
-
VsMaX almost 11 yearsthere are css frameworks for that, that's mix of CSS and javascript to acomplish it, I use Twitter Bootstrap but there are many more. Just google it.
-
Prisoner almost 11 yearswhy not just use media queries?
-
frenchie almost 11 yearsTake a look at this question: stackoverflow.com/questions/13015719/…
-
Dan Cundy almost 8 yearsUpvote for admitting you are a nob
-
-
FatFingers almost 11 yearsThanks for the code snippets! Just scratching my head trying to figure out how most people do this sort of thing. I'm looking at bootstrap, and they already have a boatload of media queries to manage the layout. Seems like I either have to make multiple controls and hide/show based on size, or do some javascript. As I don't deal much in css, guess I was hoping there was another way ;)
-
CallSign-Filter over 3 yearsThis is great advice for switching styles, but not classes