CODEWITHSUNDEEP
cssstylesbreakpoints
FatFingers
FatFingers

Reputation: 6897

Switching CSS classes based on screen size

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!

Upvotes: 46

Views: 99848

Answers (3)

Tom Carpenter
Tom Carpenter

Reputation: 81

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%;
  }
}

Upvotes: 1

Nej Kutcharian
Nej Kutcharian

Reputation: 4254

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

Upvotes: 69

Felipe Miosso
Felipe Miosso

Reputation: 7339

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.

Upvotes: 24

Related Questions