Switching CSS classes based on screen size

Question

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!

Answer 1

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 */
}

Answer 2

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.

Answer 3

Like Nej Kutcharian posted, you can use the above approach and just to relate it back to the class scenario. Rather than switching class you use the same class and change the styling it applies depending on the size of the screen.

As shown below, any element with the class "adjust-me-based-on-size" will have a margin-left and margin-right with differing values depending on the media size, so default is 15% but if the screen is between 800 and 1200 (px) it will have 10% instead and less 800px will have no right margin and a left margin of 5%.

.adjust-me-based-on-size{
  margin-left: 15%;
  margin-right: 15%;
}
@media only screen and (min-width: 800) and (max-width: 1200) {
  .adjust-me-based-on-size {

    margin-left: 10%;
    margin-right: 10%;
  }
}
@media only screen and (max-width: 800px) {
  .adjust-me-based-on-size {
    margin-left: 5%;
    margin-right: 0%;
  }
}