Dynamischer grid generiert aus breakpoints

Tim Bernhard

CSS

Dieser Beitrag ist etwas älter. Meinungen, Daten und Codes könnten veraltet sein.

Helfen Sie mit, allfällige Fehler zu korrigieren: GitHub

Ich konnte MediaQueries dynamisch aus Zurb Foundations-Breakpoints für ein Raster mit folgendem Sass-Code generieren:

    $i: 2;
    @each $s,
    $breakpoint in $breakpoints {
        @media (min-width: $breakpoint) {
            div.grid {
                .element {
                    width: calc(100%/#{$i});
                }
            }
        }
        $i: $i+1;
    }

In meinem Fall generiert es die Medienabfragen für alle Breakpoints, die für das Zurb Foundation Framework in den Sass-Array $breakpoints definiert sind. Für jeden Haltepunkt erhöht er die Anzahl der in einer Reihe des Gitters angezeigten Elemente, indem er seine Breite einstellt, beginnend mit zwei Elementen für die kleinste Bildschirmbreite. Natürlich muss für das .element die display -Eigenschaft auf inline-block gesetzt sein.

Webmentions

Keine Kommentare vorhanden für diese Seite.