3
Ich lese den Quellcode von flexboxgrid, wo ich das zufällig bemerkte.Warum hat flexboxgrid Medienabfragen?
Die gemeinsamen Stile für col-xs, col-sm und col-lg sind die gleiche:
.col-xs,
.col-xs-1
{
box-sizing: border-box;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
Der Stil für jeden .col-[gridSize]-[columnSize] nicht variieren, solange wir nur gridSize ändern:
.col-xs-1 {
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-md-1 {
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-lg-1 {
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-[gridSize]-offset-[offsetNum]
ähnlich sieht so aus:
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
Der einzige Unterschied besteht darin, dass xs nicht in Medienabfragen eingeschlossen ist und sm und md in media queries verpackt sind. Ich konvertiere diese Bibliothek in css-in-js, wenn die CSS gleich ist, warum es in Media-Abfragen?
Ich habe nicht viel über flexboxgrid gelesen, aber höchstwahrscheinlich 'xs' ist nicht in einer Medienabfrage, weil es ein mobiles erstes Framework sein könnte, genau wie Bootstrap. Die allgemeine Idee ist, dass Sie Ihr Design basierend darauf machen, wie es auf dem Handy aussieht, und dann anfangen, es aufzubauen (deshalb heißt es ** Mobile First **). Nicht umgekehrt, Desktop to Mobile. – Ricky
Ich glaube nicht, dass dies eine Antwort benötigt, Sie können in [** mobile zuerst **] (http://ux.stackexchange.com/a/35317) schauen und wenn Sie irgendwelche Zweifel haben, sind wir hier Hilfe. – Ricky
@Ricky_Ruiz Ich lese, dass '%' Elemente funktionieren basierend auf der Breite der Eltern, die entweder Container Flüssigkeit wäre, die die gesamte Breite einnimmt, wenn der Bildschirm oder Container, der in "rem" definiert ist. Kannst du mir ein wenig mehr darüber erzählen, wie '.col-sm-1' mit' .container' interagiert, dessen Breite mit der Medienabfrage in 'rem' festgelegt wurde? – vamsiampolu