Gibt es eine Möglichkeit, Float auf unterschiedlicher Bildschirmgröße zu ändern?

Question

Ich bin mir nicht sicher, ob ich es klar erklären kann und ob das möglich ist. Ich habe nur ein grundlegendes Verständnis von HTML/CSS. Ich bin auf der Suche nach einer Möglichkeit, ein schwebendes Element nicht Float zu haben, wenn von einem kleineren Bildschirm (mobiles Gerät) betrachtet. Ich habe ein Bild, das auf der linken Seite eines Absatzes schwebt, aber wenn es von einem Handy aus betrachtet wird, wird das Bild mit dem Text Seite an Seite zu voll. Gibt es eine Möglichkeit, es normal auf der linken Seite schweben zu lassen, aber in kleineren Bildschirmen über dem Text zu erscheinen? Vielen Dank!

Answer 1

Was Sie brauchen, ist Media Queries zu definieren. Medienabfragen sind wie CSS-Trigger, die definieren, in welchen Auflösungen bestimmte Regeln angewendet werden.

.div img { 
    float: left; 
} 

/*This will cause the img receive float none rule when screen is smaller than 768px*/ 
@media only screen and (max-width: 768px) { 
    .div img { 
     float: none; 
    } 
} 

Es gibt eine komplette Anleitung, die Sie rechts auschecken können here.

Answer 2

Mit media queries sollte sein, was Sie brauchen.

Zum Beispiel.

@media only screen and (max-width: 768px) { 
    .content { 
     float: none; 
    } 
} 

Im Grunde sagt, dass, wenn die Bildschirmgröße weniger ist dann 768px dann der Klasseninhalt wird keinen Schwimmer hat.

Answer 3

Was Sie suchen genannt MediaQueries ist: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Sie werden sich wie etwas brauchen:

@media screen and (max-width: 400px){ 
    yourelementselector { 
     ... your CSS... 
    } 
}