Switching CSS-Klassen basierend auf der Bildschirmgröße

Question

CSS nob hier ...

Ich schaue mir ein reaktionsfähiges Framework und vorstellen, wie ich verschiedene Aufgaben erfüllen würde.

Basierend auf der Größe des Bildschirms, haben sie an den Körper Tag hinzugefügt Klassen wie:

.PhoneVisible, .DesktopVisible, etc ...

Sie auch Klassen Links in Schaltflächen machen :

.btn, kleine Taste, med-Taste, Groß Taste

ich bin verwirrt, wie Sie über das Ändern Sie Ihre CSS gehen würde. I.E. etwas wie:

<a href="#" class="MyButtonOptions">XXXX</> 

.PhoneVisible .MyButtonOptions { btn small-button } 
.TabletVisible .MyButtonOptions { btn med-button } 
.DesktopVisible .MyButtonOptions { btn large-button } 

Müssen Sie die verschiedenen Optionen individuell einstellen?

d. H. .PhoneVisible .MyButtonOptions {height: 30px; } ???

Alle Ratschläge geschätzt!

Answer 1

Werfen Sie einen Blick auf diese https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

Eine andere Möglichkeit besteht darin, das resize-Ereignis mit einem Stück "switch code" zu verknüpfen.

Etwas wie folgt aus: 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'); 
    } 
}) 

Über den Rahmen, versuchen http://purecss.io/ oder http://getbootstrap.com/

Ich hoffe, es hilft.

Answer 2

CSS Media Queries sind definitiv der Weg zu gehen.

Sie können einfach Ihre CSS auf die Browsergröße basierend trennen, Pixeldichte usw.

Hier ist eine Liste von Beispielen aus CSS-Tricks ist.

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