En guide för att utveckla responsiv webbdesign med flytande rutnätslayouter. Hur flytande galler fungerar


Hur man skapar ett responsivt rutnätSteg 3: Skapa en rutnätsbehållare

Varje rutnät har en behållare som bestämmer dess maximala bredd. Vanligtvis kallar jag det .l-wrap . Prefix.l- betyder layout(layout). Jag har använt det här namnet sedan jag lärde mig det SMACSS, metodik Jonathan Snook.

L-omslag (
max-bredd: 1140px;
margin-right: auto;
marginal-vänster: auto;
}

Obs: För bättre tillgänglighet och lyhördhet rekommenderar jag starkt att du använder pixlar istället relativa enheter mått som em eller rem. Jag använder pixlar i exemplen eftersom de är lättare att förstå.

Steg 4: Beräkna kolumnbredd

Kom ihåg att vi använder flytningar för layouten av kolumner och indrag? Med flöten kan vi bara använda fem CSS-egenskaper för att skapa kolumner och indrag i fallet med flexer, det finns lite fler av dem.

  • bredd
  • marginal-höger
  • marginal-vänster
  • stoppning-höger
  • stoppning-vänster

    • Om du kommer ihåg när du använder CSS-gridmarkup ser ut ungefär så här:



    Grid element
    Grid element
    Grid element

    Från denna markering är det tydligt att rutnätet endast har tre kolumner. Du kan också se att det inte finns några ytterligare. Det betyder att:

  • Vi skapar kolumner med hjälp av egenskapen width;
  • Vi skapar stoppning med hjälp av marginalen eller stoppningsegenskaperna.

    • Det är svårt att tänka på kolumner och stoppning samtidigt, så låt oss först föreställa oss att vi gör ett rutnät utan stoppning.

    Detta rutnät kommer att se ut så här:

    Rutnät med tre kolumner utan indrag.

    Nu måste vi göra några matematiska beräkningar. Vi vet att rutnätet har en maximal bredd på 1140 pixlar, vilket betyder att bredden på varje kolumn är  380 pixlar(1140 ÷ 3).

    Three-col-grid .grid-item (
    bredd: 380px;
    flyta till vänster;
    }

    Än så länge är allt bra. Vi gjorde ett rutnät som fungerar bra på visningsportar mer 1140 pixlar. Tyvärr går allt sönder när viewporten blir mindre.

    Rutnätet bryter när visningsporten är mindre än 1140px

    På grund av detta kan vi inte använda pixlar. Vi behöver en måttenhet som beror på behållarens bredd: det här är en procentandel. Låt oss ställa in kolumnbredden i procent:

    Three-col-grid .grid-item (
    bredd: 33,33333%;
    flyta till vänster;
    }

    Koden ovan definierar ett enkelt vätskenät med tre kolumner utan stoppning. Kolumner ändrar sin bredd i proportion till bredden på webbläsarfönstret.

    Tre kolumner utan indrag.

    Innan vi går vidare måste vi klargöra en sak. När alla barn i en behållare flyter (de ges flyta egendom), nollställs behållarens höjd till noll. Detta fenomen kallas floatkollaps. Behållaren beter sig som om den inte innehåller barnelement:

    Float kollaps. Bild via CSS-tricks

    För att fixa detta behöver vi en tydlig lösning. Det ser ut så här:

    Three-col-grid::after (
    display: tabell;
    klara: båda;
    innehåll: "";
    }

    Om du använder en förprocessor som Sass, kan du göra en mixin för att använda den här koden bekvämt på olika platser:

    //Clearfix
    @mixin clearfix (
    &::efter (
    display: tabell;
    klara: båda;
    innehåll: "";
    }
    ) //Användning
    .three-col-grid(
    @inkludera clearfix;
    }

    Vi har sorterat ut högtalarna. Nästa steg är indrag.

    Steg 5: Bestäm positionen för indragen

    Än så länge vet vi bara att de kan implementeras med marginal- och stoppningsegenskaperna. Men vilken ska man välja?

    Efter några försök kommer du snabbt att inse att det finns fyra möjliga sätt att göra dessa stoppningar: marginal och stoppning. Indrag kan placeras:

  • Å ena sidan yttre;
  • Å ena sidan inre;
  • Jämnt på båda sidor, yttre;
  • Jämnt på båda sidor, invändigt.

    • Fyra möjliga sätt att skapa kolumner och utfyllnad.

    Det är här svårigheterna börjar. Du måste beräkna kolumnbredder på olika sätt beroende på vilken metod du använder. Låt oss ta dessa metoder en efter en och se skillnaden. Ta dig tid medan du läser.

    Metod 1: Envägsmarginaler

    Med den här metoden skapar du utfyllnad med marginal . Denna indrag kommer att placeras till vänster eller höger om kolumnen. Det är upp till dig att bestämma vilken sida du ska välja.

    För denna artikels syften, låt oss anta att du ställer in stoppningen till höger. Så här ska du göra:

    Grid-objekt (
    marginal-höger: 20px;
    flyta till vänster;
    }

    Beräkna sedan om kolumnbredden som på bilden:

    Externa ensidiga marginaler.

    Som du kan se på bilden ovan, 1440 pixlar det är tre kolumner och två stoppningar.

    Och här dyker problemet upp... Vi behöver beskriva kolumnerna i procent, men samtidigt är indragen fixerade till bredden 20px. Vi kan inte göra beräkningar med två olika enheter mått samtidigt!

    Det var omöjligt förr, men det är möjligt nu.

    du kan använda CSS-calc funktion för att kombinera procentsatser med andra måttenheter. Den hämtar det procentuella värdet i farten för att utföra beräkningar.

    Detta innebär att du kan ange bredden som en funktion och webbläsaren kommer automatiskt att beräkna dess värde:

    Grid-objekt (
    width: calc((100 % - 20px * 2) / 3);
    }

    Det här är bra.

    Efter att ha fått kolumnbredden måste du ta bort den sista stoppningen från rutelementet längst till höger. Så här gör du:

    Grid-item:last-child (
    marginal-höger: 0;
    }

    Oftast, när du tar bort den sista stoppningen från elementet längst till höger, vill du också ge det en högeromslutning för att förhindra subpixelavrundningsfel som gör att ditt rutnät lindar det sista elementet till ny linje. Detta händer bara i webbläsare som rundar pixlar.

    Ett avrundningsfel för underpixlar kan bryta rutnätet och skjuta det sista elementet till nästa rad.

    .grid-item:last-child (
    marginal-höger: 0;
    flyta: höger;
    }

    Puh. Nästan klar. Och en sak till.

    Vår kod är bara bra om rutnätet bara innehåller en rad. Men det misslyckas om det finns mer än en rad med element 😢

    Koden misslyckas om det finns mer än en rad.

    Vi måste ta bort den högra marginalen från varje element längst till höger på varje rad. Det bästa sättet för att göra detta  använd nth-child:

    /* För ett rutnät med 3 kolumner */ .grid-item:nth-child(3n+3) (
    marginal-höger: 0;
    flyta: höger;
    }

    Det är allt du behöver för att skapa ensidiga marginaler. Här CodePen så du kan spela det själv:

    Notera: fast egendom beräkn fungerar inte i IE8 och Opera Mini. Se andra metoder om du behöver stödja dessa webbläsare.

    Metod 2: Enkelriktade inre marginaler

    Precis som med ensidiga marginaler kräver denna metod att marginalen placeras på ena sidan av kolumnen. Låt oss anta att du valde rätt sida igen.

    Grid-objekt (
    utfyllnad-höger: 20px;
    flyta till vänster;
    }

    Ensidig stoppning med stoppning

    Observera att bredden skiljer sig från tidigare metod? Vi bytte egenskapen box-sizing till border-box . Nu beräknas bredd inklusive stoppning.

    I det här fallet har två av de tre kolumnerna en större bredd än den sista, vilket i slutändan leder till konstiga beräkningar och gör CSS svårt att förstå.

    Jag föreslår att du inte ens fortsätter med den här metoden. Saker och ting kommer att bli riktigt läskiga. Försök på egen risk.

    Metod 3: Yttre separerade marginaler

    I den här metoden delar vi stoppningen i två delar och lägger hälften på varje sida av kolonnen. Koden ser ut ungefär så här:

    Grid-objekt (
    marginal-höger: 10px;
    marginal-vänster: 10px;
    flyta till vänster;
    }

    Sedan räknar vi om kolumnbredden som på bilden:

    Separata marginaler.

    Som vi lärde oss tidigare kan du beräkna kolumnbredden med hjälp av calc-funktionen. I den här situationen subtraherar vi tre stoppningar från 100 % innan vi dividerar svaret med tre för att få kolumnbredden. Med andra ord kommer kolumnbredden att vara calc((100% - 20px * 3) / 3) .

    Grid-objekt (
    width: calc((100 % - 20px * 3) / 3);
    marginal-höger: 10px;
    marginal-vänster: 10px;
    flyta till vänster;
    }

    Detta är allt! Du behöver inte göra något extra för rutnät med flera rader 😉 Varsågod CodePen så du kan spela:

    Metod 4: Inre separerade marginaler

    Denna metod liknar den föregående. Vi delade indragen och placerade dem på varje sida av kolonnen. Den här gången använder vi stoppning:

    Grid-objekt (
    stoppning-höger: 10px;
    padding-vänster: 10px;
    flyta till vänster;
    }

    Sedan beräknar du kolumnbredden så här:

    Internt separerad stoppning.

    Har du märkt att det i det här fallet är mycket lättare att göra beräkningar? Det stämmer: det är en tredjedel av rutnätets bredd vid varje kontrollpunkt.

    Grid-objekt (
    bredd: 33,3333%;
    stoppning-höger: 10px;
    padding-vänster: 10px;
    flyta till vänster;
    }

    Här CodePen, så att du kan spela:

    Innan vi går vidare vill jag ge dig ett varningens ord om du använder delad stoppning. Om du tittar på markeringen i CodePen, kommer du att se att jag har lagt till en extra i .grid-item . Detta extra är viktigt om komponenten innehåller en bakgrund eller kanter.

    Detta beror på att bakgrunden visas inom utfyllnadsgränserna. Jag hoppas att den här bilden hjälper dig att förstå genom att visa sambandet mellan bakgrund och andra egenskaper.

    Bakgrunden visas på stoppning.

    Vad skulle jag använda?

    När jag började tillverka nät för två år sedan gjorde jag mest nät som var designade i ett uppifrån och ner-upplägg och byggt på ett hybridsystem. Med detta tillvägagångssätt använde jag procentvärden för både bredd och stoppning.

    På den tiden älskade jag hur lätt det var att justera stoppningen på ena sidan av kolonnen. Det var lättare eftersom jag inte är så bra på matte. Från ytterligare beräkningar indrag / 2 svimmade jag snabbt.

    Jag är glad att jag gick den här vägen. Fastän CSS och ser mer komplicerad ut än för separerade indrag, jag var tvungen att titta på n:te underordnade väljaren. Jag insåg också vikten av att skriva CSS först för mobilen. Så vitt jag kan säga är detta fortfarande ett stort hinder för både unga och erfarna utvecklare.

    Hur som helst, om du ber mig välja nu så väljer jag delad stoppning istället för ensidig stoppning pga CSS enklare för dem. Jag rekommenderar också att du använder marginal istället för stoppning eftersom markeringen är renare. Men stoppning är lättare att beräkna, så jag fortsätter artikeln med det.

    Steg 6: Skapa ett Debug Grid

    När du precis har börjat är det särskilt användbart att ha ett referensrutnät till hands för att finjustera din markering. Detta hjälper till att se till att du gör allt rätt.

    Idag vet jag bara ett snett sätt att skapa ett felsökningsnät. Behöver skapa HTML markera och lägga till lite till det CSS. Så här ser det ut HTML:














    CSS för felsökningsrutnätet ser ut så här. Jag använder separerade marginaler för att förenkla layouten för felsökningsrutnätet:

    kolumn (
    width: calc((100 % - 20px * 12) / 12);
    höjd: 80px;
    marginal-höger: 10px;
    marginal-vänster: 10px;
    bakgrund: rgba(0, 0, 255, 0,25);
    flyta till vänster;
    }

    Anmärkning: Susan Miriam och Sobral Robson jobbar påSVG bakgrundsbild av felsökningsnätet för Susy v3 . Det är väldigt spännande eftersom du kan använda enkel funktion för att skapa ditt felsökningsnät!

    Steg 7: Gör ändringar i layouten

    Nästa steg är att göra ändringar i layouten baserat på ditt innehåll. Precis här CSS-nätet kommer att lysa i all sin glans. Istället för att skapa din markering genom att skriva ett gäng rutnätsklasser, kan du ge den ett passande namn.

    Låt oss till exempel säga att du har ett layoutrutnät som bara används för gästartiklar. På ett skrivbord ser layouten ut ungefär så här:

    Ett exempel på ett layoutrutnät som endast används för gästartiklar.

    Uppmärkningen för layouten av denna gästartikel kan vara ungefär så här:

    Div class="l-guest-article">









    Så nu har vi 12 kolumner. Bredden på en kolumn är 8,333 % (100 / 12).

    Bredden på.l-gäst är lika med två kolumner. Så du måste multiplicera 8,333 % med två. Enkelt nog. Gör samma sak för de återstående elementen.

    Här föreslår jag att du använder en förprocessor som Sass vilket gör att du lättare kan beräkna kolumnbredder genom att använda procentfunktionen istället för att göra beräkningarna manuellt:

    L-gäst-artikel (
    @inkludera clearfix;
    .l-guest (
    // Hmm, läser bättre än 16,666% :)
    bredd: procent(2/12);
    padding-vänster: 10px;
    stoppning-höger: 10px;
    flyta till vänster;
    ) .l-main (
    bredd: procent(7/12);
    stoppning-höger: 10px;
    padding-vänster: 10px; .grid-item (
    padding-vänster: 10px;
    stoppning-höger: 10px;
    flyta till vänster;
    ) .l-gäst-artikel (
    .l-guest (
    bredd: procent(2/12);
    }
    .l-main(
    bredd: procent(7/12);
    }
    .l-sidebar(
    bredd: procent(3/12);
    }
    }

    Nä, nu är det mycket bättre :)

    Steg 8: Skapa layoutvarianter

    Det sista steget är att göra din layout responsiv. Låt oss anta att vår gästartikellayout beter sig så här:

    Uppmärkningen av vår gästartikel bör inte ändras. Det vi har — är den mest prisvärda layouten som möjligt. Så förändringarna måste vara helt inne CSS.

    När du skriver CSS för vår responsiva gästlayout rekommenderar jag starkt att du skriver CSS mobil först eftersom det gör din kod enklare och renare. Först och främst kan vi börja skriva CSS för mobil layout.

    L-gäst-artikel (
    .l-guest (
    /* Denna plats är tom */
    }
    .l-main(
    margin-top: 20px;
    }
    .l-sidebar(
    margin-top: 20px;
    }
    }

    Vi har inget att göra här, varje komponent tar upp hela den tillgängliga bredden som standard. Vi kan dock lägga till en toppstoppning till de två sista elementen för att skilja dem från varandra.

    Låt oss anta att vi ställer in för denna layout Kontrollpunkt V 700 pixlar. .l-guest bör uppta 4 av de 12 kolumnerna, och .l-main och .l-sidebar bör uppta 8 kolumner vardera.

    Här måste vi ta bort egenskapen margin-top från .l-main eftersom den måste vara i linje med .l-guest .

    Dessutom, om vi ställer in .l-sidofältets bredd till 8 kolumner, kommer den automatiskt att gå till den andra raden — det kommer inte att finnas tillräckligt med utrymme i den första raden. Eftersom det är i den andra raden måste vi också lägga till en vänstermarginal till .l-sidebar för att trycka den på plats. Alternativt kan vi göra det strömlinjeformat till höger — Jag ska göra det, det kräver inga extra beräkningar.

    Och eftersom vi har fått våra rutnätselement att flyta, måste rutnätsbehållaren innehålla en klar-fix för att rensa flottören på dess underordnade element:

    L-gäst-artikel (
    @inkludera clearfix;
    .l-guest (
    @media (min-bredd: 700px) (
    bredd: procent(4/12);
    flyta till vänster;
    }
    }
    .l-main(
    margin-top: 20px;
    @media (min-bredd: 700px) (
    bredd: procent(8/12);
    marginal-top: 0;
    flyta till vänster;
    }
    }
    .l-sidebar(
    margin-top: 20px;
    @media (min-bredd: 700px) (
    bredd: procent(8/12);
    flyta: höger;
    }
    }
    }

    Låt oss slutligen gå vidare till skrivbordslayouten.

    Låt oss säga att för den här layouten ställer vi in ​​brytpunkten på 1200px. .l-guest tar upp 2 av 12 kolumner, .l-main  - 7 av 12 och .l-sidebar  - 3 av 12.

    För att göra detta skapar vi ett nytt mediauttryck inom varje gridelement och ändrar bredden efter behov. Observera att vi också måste ta bort den övre stoppningen från .l-sidebar

    L-gäst-artikel (
    @inkludera clearfix;
    .l-guest (
    @media (min-bredd: 700px) (
    bredd: procent(4/12);
    flyta till vänster;
    ) @media (min-bredd: 1200px) (
    bredd: procent(2/12);
    }
    }
    .l-main(
    margin-top: 20px;
    @media (min-bredd: 700px) (
    bredd: procent(8/12);
    marginal-top: 0;
    flyta till vänster;
    }
    @media (min-bredd: 1200px) (
    bredd: procent(7/12);
    }
    }
    .l-sidebar(
    margin-top: 20px;
    @media (min-bredd: 700px) (
    bredd: procent(8/12);
    flyta: höger;
    }
    @media (min-bredd: 1200px) (
    bredd: procent(3/12);
    marginal-top: 0;
    }
    }
    }

    Här CodePen med den slutliga layouten vi skapade:

    Åh, förresten, du kan uppnå samma resultat med Susy. Glöm bara inte att ställa in rännans position på insidan-statisk.

    Sammanfattande

    Wow. Det var en lång artikel. Jag trodde att jag skulle dö tre gånger när jag skrev den. Tack för att du läste till slutet. Jag hoppas att du inte dog tre gånger när du läste! 😛

    Som du kanske har märkt i den här artikeln är stegen för att skapa ett responsivt rutnät relativt enkla. De flesta människor blir förvirrade vid steg 5 (bestämma positionen för indrag) och 8 (anpassa layouten).

    Steg 5 är enkelt när du tar hänsyn till allt möjliga sätt, och vi tog isär dem tillsammans. Steg 8 är lättare om du har tillräckligt med erfarenhet av att skriva CSS först för mobilen.

    Jag hoppas att den här artikeln har gett dig kunskapen att bygga ditt eget lyhörda mesh, och jag hoppas att se dig bygga ett anpassat mesh för ditt nästa projekt.

    Nuförtiden finns det ramar för allt, och det verkar som att precis när du räknar ut en kommer en annan att ta dess plats. Detta gäller särskilt för responsiva grid CSS-ramverk, och alla kallar sig "bäst". Detta överflöd av information är förvirrande.

    Låt oss ta ett steg tillbaka, ta ett djupt andetag och fråga oss själva: kommer vi verkligen att använda alla 24 alternativ, och en miljon av deras kombinationer, som "This Coolest Framework" ger oss? Ofta behöver vi en enkel, flexibel lösning, med begränsad mängd varianter, med en kodbas som vi kan utöka när som helst. Jag vill prata om fyra tekniker för att implementera CSS-rutnät, som alla är lätta att utöka. Det här är de fyra sätten:

  • Adaptiv rutnätslayout #1 (med negativ utfyllnad)
  • Adaptiv rutnätslayout #2 (med boxstorlek: border-box)
  • Adaptiv rutnätslayout baserat på tabellvisning
  • Flexbox-baserad responsiv rutnätslayout

    • Jag kommer att förenkla beskrivningen av dessa metoder och kommer att använda en minimal mängd enkel och begriplig CSS. Varje metod kommer att ha en demo på CodePen.

    Allmän CSS

    Innan vi dyker in i varje metod, låt oss ta en titt på de allmänna stilarna vi kommer att använda genom exemplen. Jag kommer att använda box-sizing: border-box-deklarationen för alla dokumentelement, och även lägga till en .clearfix-klass för att rensa flytande rutor. Här är vår grundläggande CSS:

    /* återställ egenskaper */ *, *:before, *:after ( box-sizing: border-box; ) .clearfix:after ( innehåll: ""; display: table; clear: both; )

    Metod 1: använd negativ stoppning

    Denna metod bygger på att använda negativ utfyllnad för att skapa rutnätsblock med en fast utfyllnad mellan blocken. Storleken på den negativa stoppningen varierar beroende på blockets position i rutnätet, men avståndet mellan blocken förblir konstant. Låt oss titta på markeringen:

    /* rutnät */ ( marginal-bottom: 20px; ) :last-child ( margin-bottom: 0; ) ( ) @media all and (min-width: 768px) ( /* all cols margin */ ( margin-right : 20px; ) :last-child ( marginal-höger: 0; ) /* gör kolumnerna adaptiva */ .col-1-2 ( float: left; width: 50%; ) .col-1-4 ( float: vänster ; bredd: 25%; ) .col-1-8 ( flytande: vänster; bredd: 25%; ) /* 2 span rader */ .row-2 ( padding-left: 20px; ) .row-2 :first - barn ( marginal-vänster: -20px; ) /* 4 spann rader */ .row-4 ( padding-left: 60px; ) .row-4 :first-child ( marginal-vänster: -60px; ) /* 8 span rader */ .row-8 ( padding-left: 60px; ) .row-8 :nth-child(4n+1) ( margin-left: -60px; ) .row-8 :nth-child(5n-1) ) ( margin-right: 0; ) .row-8 :nth-child(6n-1) ( clear: both; ) ) @media all and (min-width: 1200px) ( /* justera bredd */ .col- 1 -8 ( float: vänster; bredd: 12,5%; ) /* 8 span rader */ .row-8 ( padding-left: 140px; ) /* återställ dessa... */ .row-8 :nth-child ( 4n+1) ( marginal-vänster: 0; ) .row-8 :nth-child(5n-1) ( marginal-höger: 20px; ) .row-8 :nth-child(6n-1) ( clear: none; ) /* och lägg till detta */ .row-8 :nth-child(1) ( margin-left: -140px; ) )

    Som du kan se, inom mediafrågevillkoren, multipliceras ett fast indragsvärde (låt oss kalla det x) med antalet kolumner i raden minus 1 (n-1), och denna indragning tillämpas på raden till vänster . Varje kolumn, utom den sista, har en fast höger indrag (x). Och den första kolumnen i raden ges en negativ indragning (n-1)*x

    Nackdelar och fel

    Vissa beräkningar krävs, och metoden blir opraktisk när antalet kolumner ökar. Dessutom, när vi ökar antalet steg (antalet graderingar av mediefrågor, till exempel 1 kolumn per rad, 4, 8...), måste vi återställa CSS, och vi måste använda en hel del matematiska beräkningar.

    En annan intressant bugg dyker upp när vi har många flytande element. Den totala mängden indrag kan kombineras vid något tillfälle och element kommer att lindas till en ny rad. Detta kan ses i fallet med 8 kolumner. Om du ändrar tillståndet för den senaste mediefrågan till en minsta bredd på mindre än 1200px, kan du se denna bugg i aktion. Kom ihåg det här. Men denna metod har också sina fördelar.

    Fördelar och användning i praktiken

    Den verkliga skönheten med denna metod är skapandet av rutnätskombinationer med fast/variabel storlek. Som ett exempel, låt oss föreställa oss ett huvudinnehållsområde med variabel bredd och ett valfritt sidoområde fast bredd. Vår HTML-kod kan se ut ungefär så här:

    Primär Lorem ipsum dolor... Sekundär Lorem ipsum dolor...

    Och CSS är så här:

    /* markup */ .primary ( margin-bottom: 20px; ) @media all and (min-width: 600px) ( .container ( padding-right: 300px; ) .primary ( float: left; padding-right: 60px; bredd: 100 %; ) .sekundär (flytande: höger; marginal-höger: -300 px; bredd: 300 px; ) )

    Här är en demo av koden i aktion på CodePen:

    Metod 2: använd box-sizing: border-box

    Denna metod använder den fulla kraften av box-sizing: border-box . Eftersom den här egenskapen tillåter oss att lägga till marginaler till ett element utan att deras värde påverkar elementets totala bredd, kan vi fortfarande uppnå flexibel mesh med fasta ”indrag”. Men här istället för att använda marginalegenskaper, kommer vi att använda interna marginaler, som kommer att fungera som utfyllnad mellan rutnätselement.

    Pålägg:

    Vi hoppar över den häpnadsväckande matematiken här, så vår CSS blir väldigt enkel. Och här är den, med möjligheten att layouta upp till 8 kolumner:

    /* rutnät */ .row ( margin: 0 -10px; margin-bottom: 20px; ) .row:last-child ( margin-bottom: 0; ) ( utfyllnad: 10px; ) @media all and (min-width: 600px) ( .col-2-3 ( float: vänster; bredd: 66,66 %; ) .col-1-2 ( float: vänster; bredd: 50 %; ) .col-1-3 ( float: vänster; bredd: 33,33%; ) .col-1-4 (float: vänster; bredd: 25%; ) .col-1-8 (float: vänster; bredd: 12,5%;) )

    Negativa höger- och vänstermarginaler på varje rad behövs för att kompensera för kolumnmarginaler. Vid den minsta bredd som anges av mediefrågan får våra rutnätselement sin egen bredd och flyter i sina behållare. Du kan ändra denna bredd som du vill, eller ange andra mediafrågor för olika grupper rutnätselement.

    Låt oss utöka den här metoden:

    Låt oss säga att du vill att .col-8-elementen ska delas 4 per rad först, sedan 8 per rad. Detta är ganska enkelt att implementera om du tänker på det lite. För ovanstående uppmärkning skulle vår CSS se ut så här:

    @media all and (min-width: 600px) ( .col-1-8 ( float: left; width: 25%; ) .col-1-8:nth-child(4n+1) ( clear: both; ) ) @media all and (min-bredd: 960px) ( .col-1-8 ( width: 12,5%; ) .col-1-8:nth-child(4n+1) ( clear: none; ) )

    Metod 3: använd tabellvisning

    Denna metod implementerar det gamla goda tabellbeteendet, men utan att bryta semantiken eller strukturen. I denna metod synliga element visas som standard som block. Men när vissa storlekar Rutnätsrader blir tabeller och kolumner blir tabellceller. Låt oss ta en titt på uppmärkningen - den liknar den från den andra metoden, men vi behöver inte .clearfix här:

    Och, följaktligen, CSS:

    /* rutnät */ .row ( margin: 0 -10px; margin-bottom: 10px; ) .row:last-child ( margin-bottom: 0; ) ( utfyllnad: 10px; ) @media all and (min-width: 600px) ( .rad ( display: tabell; tabelllayout: fast; bredd: 100%; ) ( display: tabellcell; ) /* ange kolbredder */ .col-2-3 ( bredd: 66,66%; ) .col-1-2 ( bredd: 50 %; ) .col-1-3 ( bredd: 33,33 %; ) .col-1-4 ( bredd: 25 %; ) .col-1-8 ( bredd: 12,5 % ; ) )

    Denna metod kan verka förvirrande, men den har fördelar. Till att börja med bryter vi inte semantiken genom att använda traditionella tabeller, och vi behöver inte rensa upp flytande block. Kolumner av samma höjd - lätt. En kombination av fasta kolumner och kolumner med variabel bredd? Inga problem. Alternativet för tabellvisning ger sina egna problem, och av alla fyra metoderna är det min minsta favorit. Trots att det i vissa fall är ett bra alternativ.

    Metod 4: Flexbox

    Den sista metoden jag kommer att beskriva använder flexbox-modulen. Enligt MDN:

    CSS3 Flexible Box, eller flexbox, är ett layoutläge som ger möjlighet att placera element på en sida så att de beter sig förutsägbart på sidan. olika storlekar skärm och olika enheter.

    Flexbox erbjuder många olika alternativ, vilket ger oss en kraftfull arsenal av olika layoutalternativ. Att göra en flexbox-modul responsiv kunde inte vara enklare. Som tidigare ser vår uppmärkning ut så här:

    Låt oss nu titta på vår ny CSS:

    /* grid */ .row ( display: flex; flex-flow: radomslutning; margin: 0 -10px; margin-bottom: 10px; ) .row:last-child ( margin-bottom: 0; ) ( utfyllnad: 10px ; width: 100%; ) @media all and (min-width: 600px) ( /* set col widths */ .col-2-3 ( width: 66,66%; ) .col-1-2 (width: 50% ; ) .col-1-3 ( bredd: 33,33%; ) .col-1-4 ( bredd: 25%; ) .col-1-8 ( bredd: 12,5%; ) )

    I I detta fall för rader måste du ställa in egenskapen display till flex och även ange egenskapen flex-flow. En fullständig definition och beskrivning av dessa egenskaper finns i MDN-dokumentationen för flexbox. För en mediefråga ändrar vi helt enkelt bredden på kolumnerna och låter flexbox göra resten åt oss.

    Slutsats

    Vi tittade på fyra sätt att skapa responsiva rutnät med hjälp av CSS, var och en med sina egna fördelar och nackdelar. Det finns inget absolut sätt att göra något på, och jag hamnar ofta i situationer där ett sätt är bättre än ett annat, eller jag behöver kombinera flera alternativ. Metod 1 och 2 är mina favoriter, och jag använder dem ofta i mina projekt (grundläggande layout med metod 1 och adaptiva rutnät med metod 2).

    Som nämnts tidigare har den tredje metoden sina fördelar, men jag föredrar att använda tabelllayouter endast när det är absolut nödvändigt. Metod 4 är fantastisk och jag kan inte vänta med att överföra den till alla mina projekt. Flexbox vinner dragkraft, men den stöds bara i IE10 och högre. Det finns polyfills för det, men jag föredrar att klara mig utan dem. Även om det idag finns scenarier där flexbox skulle vara en utmärkt lösning (till exempel i mobila webbläsare där IE inte finns).

    Var och en av dessa metoder är lätt skalbara och expanderbara. Genom att tillämpa de presenterade idéerna kan du enkelt anpassa din egen responsiva layout med önskad placering för meshelement med minsta kvantitet CSS. CSS-gridmodulen är på väg, men det kommer att dröja innan vi kan använda den. Jag hoppas att du gillade artikeln och nu är mindre skrämd av att använda CSS-rutnät.

    Jag hoppas att den här listan hjälper någon. Jag försökte samla mest intressanta system.

    Bootstrap Grid

    Google-material Design. De flesta designers har stött på detta system, som är mycket praktiskt till sin natur. Manualerna är väl beskrivna. En av de mest avancerade lösningarna på marknaden. Men tyvärr tvingar det dig att använda Googles system, som inte slutar ändra dem;)



    Detta är ett rutsystem baserat på visningsegenskaper. flexboxgrid.com

    Gammalt system HTML-blocklayout används nu sällan, även om det ger en ganska intressant möjlighet till förändring.
    Personligen tycker jag att det är ganska svårt att jobba med henne.


    Det finns många exempel där man tar bootstrap-principer som grund. Det är ett 6 eller 12 högtalarsystem, och designers gör om det. Ändra storleken på enskilda block, gör dem ojämlika och så vidare. Detta är en trend nu.


    Anpassad modulbaserad rutnätsbaserad HTML 100px / 200px / 300px / 400px Crow Grid Framework

    Crow v3.0 – ramverk för smarta nät

    Jämfört med andra system är det inte särskilt populärt, intressant och fräscht, som påminner om affischernas konstruktivism. Kanske en dag kommer det att bli väldigt populärt.

    Riktlinjer för mänskligt gränssnitt

    Designprinciper – Kort beskrivning –
    Lär dig mer om iOS app development.developer.apple.com


    Mycket lite har sagts om modulära system, men deras principer är mycket intressanta. Naturligtvis är den i första hand lämplig för iOS.

    Human Inter
    Human Inter mesh

    Human Inter är ett ganska unikt system som inte lämpar sig för alla projekt. Den är baserad på principen och den vitruvianska mannen. När den används är en av de viktigaste aspekterna vågrät linje. Detta är ett rutnät baserat på bootstrap.
    Om du vill se reglerna och användarmanualerna för detta system, vänligen maila mig: ivantsanko11@ gmail. com

    Flytande layout låter dig presentera allt innehåll i en form som är lätt att läsa på alla enheter eller skärmstorlekar.

    De flesta designers använder flytande rutnätslayouter för detta eftersom de gör det lättare att arbeta med. olika typer enheter.

    I den här artikeln kommer vi att titta på flytande rutnät och deras betydelse för responsiv design.

    Vad är flytande rutnätslayouter?

    Först måste du förstå vad flytande galler är. Den bästa definitionen av vätska finns på Wikipedia:

    En vätska är ett ämne som ständigt förändras (förskjuts) när kraft appliceras på det.

    I webbdesign är vätskan vår design eller layout, och kraften är användarens skärmstorlek eller enhet. Oavsett vilken enhet eller skärmstorlek kommer komponenterna i en flytande design att röra sig och anpassa sig till användarens miljö.

    Vikten av flytande galler

    För vissa typer av enheter måste vi ställa in bredd och höjd manuellt. Eftersom flytande rutnät med en flytande webbplatslayout skiftas inom dimensionerna för den överordnade behållaren, behövs restriktiva parametrar för olika skärmstorlekar och enheter.

    Vi kan inte fokusera på vissa enheter. Fördelen med ett flytande galler är att vi kan ställa in en maximal bredd och det kommer att fungera för stora skärmar med hjälp av parametrar som anges i procent.

    Hur flytande galler fungerar

    För gummi CSS-layout med ett fast rutnät brukade de använda ett rutsystem med 960 pixlar. Layoutrespons uppnåddes genom att använda olika pixelstorlekar för olika skärmstorlekar. Nu är det dags att skapa procentbaserade layouter, som är kända som flytande layouter.

    I flytande maskor definierar vi för designen maximal storlek layout. I det här fallet är rutnätet uppdelat i ett visst antal kolumner. Vi skapar sedan varje element med proportionell bredd och höjd, snarare än baserat på pixeldimensioner. Närhelst enheten eller skärmstorleken ändras, justeras elementets bredd och höjd proportionellt mot dimensionerna på den överordnade behållaren.

    Låt oss dyka djupare in i flytande rutnät för att få en uppfattning om hur flytande layouter fungerar.

    Dammig patron

    Palantir.net


    Klä dig responsivt


    Flytande nätsystem och generatorer

    Att skapa ett flytande nät är inte lätt och kräver tid och ansträngning. Därför skulle det vara klokt att välja ett CSS-rutnätsramverk eller nätgenerator som grund för din layoutdesign.

    Nedan finns en lista över gratis CSS-system och nätgeneratorer för vätskelayout på div:er:

    • Variabelt nätsystem;
    • Fluid Grid Calculator ;
    • Fluid Grid från Bootstrap.

    De flesta CSS grid-ramverk har inbyggda smarta funktioner och har testats i många webbläsare. Syftet med den här guiden är att ge dig en grundlig förståelse för att skapa adaptiv layout och gummi med flytnät.

    Därför skulle det vara klokt att skapa ett flytande rutnät som hjälper dig att förstå hur det fungerar.

    Jag använder Variable Grid System för att generera ett flytande rutnät enligt de specificerade kraven. Gå till demoversionen och ändra variabelvärdena. Jag kommer att använda följande värden:

    • Kolumnbredd – 60;
    • Antal kolumner – 12;
    • Indragsbredd – 20.

    Ladda sedan ner den flytande versionen CSS-fil. Öppna den nu textredigerare som du vill och hitta raden Grid >> 12 kolumner. Koden nedan representerar innehållet i avsnittet Grid >> 12 kolumner:

    Container_12 .grid_1 ( width:6.333%; ) .container_12 .grid_2 ( width:14.667%; ) .container_12 .grid_3 (width:23.0%; ) .container_12 .grid_31 .31 (bredd: 39,667%;) .container_12 .grid_6 (bredd: 48.0%;) .container_12 .grid_7 (Bredd: 56.333%;) .container_12 .Grid_8 (Bredd: 64.667%; .2% .grid:) 81,333%; ) .container_12 .grid_11 (bredd:89,667%; ) .container_12 .grid_12 (bredd:98,0%;)

    container_12 är huvudbehållaren. Varje element i vår design ska finnas i en container med klassen container_12. Baserat på procentsatserna upprättas klasserna .grid_1, .grid_2 ... .grid_n. Flytande rutnät byggs med kolumner som behandlas som flytande kolumner. När skärmstorleken ändras kommer bredden på dessa kolumner att anpassas proportionellt mot dimensionerna på den överordnade behållaren.

    Vårt rutnät har 12 flytande pelare. Låt oss titta på hur kolumnerna är ordnade i en gummilayout (exempel):


    Koden för detta avsnitt ges nedan. För att få ytterligare information du kan se de nedladdade filerna:

    Vätskenät med vätskekolumner 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2

    Varje uppsättning komponenter finns i ett element med klassen container_12 . Inuti behållaren kan vi använda klassen grid_n för att skapa en flytande kolumn med en specifik bredd. Med klassen grid_1 kan vi få en kolumn 1/12 av bredden på det ursprungliga rutnätet, med grid_2 - 2/12 .

    Du kan ladda ner demon och ändra storlek på ditt webbläsarfönster för att se rutnät för flytande kolumner i aktion.

    Kapslade flytande kolonner

    Om du använder flytande layout i html med CSS-ramverk är det inte svårt att skapa rutnät med flytande kolumner. Men inte alla projekt kommer att vara så enkla som ovanstående layout. Du kan behöva skapa kolumner och rader inuti andra element. Kolumner som finns i en överordnad kolumn kallas kapslade kolumner. Låt oss se hur man skapar kapslade flytande kolumner med hjälp av CSS-filen vi genererade tidigare.

    Se demo


    Ovanstående layout innehåller två rader. Den första raden är uppdelad i två sektioner med sex kolumner, och var och en av de två sektionerna är återigen uppdelad i fyra sektioner med tre kolumner.

    Likaså är den andra raden uppdelad i tre fyra-kolumniga sektioner, och var och en av de tre sektionerna är också uppdelad i tre fyra-kolonnsektioner. Detta skapar kapslade kolumner i rutnät. Låt oss titta på koden för ovanstående layout:

    Kapslade vätskekolonner 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4

    Först skapar vi huvudbehållarna och kolumnerna som vi gjorde i föregående avsnitt. Inuti kolumnen måste vi skapa en annan behållare med klassen container_12 för kapslade kolumner. Nu får vi 12 kolumner till inom de sex huvudsakliga. De tolv underkolumnerna kan sedan delas upp efter behov.

    Flytande mesh design

    De flesta nybörjardesigners tror att användningen av ett CSS-ramverk kommer att göra layouten responsiv. Tyvärr är det inte så lätt att skapa en gummilayout. Flytande rutnät anpassar sig till ändringar i webbläsarfönstret eller enheten. Om du inte planerar din design noggrant kommer användare att ha problem med att se innehåll på mindre enheter.

    Tänk på skärmen nedan:

    På så sätt kommer det flytande rutnätet som diskuterats i de föregående avsnitten att visas på små skärmar. Dessa är bara rutnätskolumner utan motsvarande data. Även då visas inte siffran 1 korrekt. När det kommer till att mata ut innehåll kommer det att bli en komplett röra. I det här fallet måste vi justera bredden på kolumnerna.

    du kan använda CSS-mediafrågor att justera kolumnbredden för olika storlekar skärm i gummilayouten på webbplatsen. I scenariot ovan kan du dubbla kolumnbredden och ha 6 kolumner istället för 12 för att säkerställa bättre läsbarhet av innehållet. Därför, i responsiva konstruktioner, beror inte allt på ett flytande rutnät.

    Testar flytande galler

    Nu när vi har täckt grunderna för att bygga flytande rutnät, låt oss gå vidare till att skapa en enkel demo med använder JQuery för att testa det flytande gallret på olika skärmstorlekar. Låt oss först skapa sidlayouten och navigeringsfältet:

    Fluid Grid Tester Monitor Läsplatta Landskapsorientering Läsplatta stående format Smartphone liggande orientering Smartphone porträtt orientering

    Testsidan har en grundläggande HTML-layout med JQuery. Elementet med ID device_panel kommer att innehålla ett navigeringsfält för standardenheter: stationära datorer, smartphones och surfplattor. När länken har klickats kommer funktionen changeGrid att anropas med enhetstypen som parameter.

    Längst ner har vi en iframe som kommer att användas för att ladda det flytande CSS-vätskenätet. Den finns i filen media_query.html. Låt oss nu titta på changeGrid-funktionen.

    Hej alla! Idag kommer vi att prata om vad rutsystem är eller helt enkelt flexibla nät i adaptiv layout.

    Låt oss först definiera vad ett Grid System är.

    Grid System är en samling klassbaserade stilar som låter användaren styra layouten på en sida med hjälp av ett system av rader och kolumner.

    Låt oss föreställa oss att vi har en bloggsida. Den är uppdelad i 2 kolumner: huvuddelen till vänster och sidofältet till höger. Låt oss försöka skapa ett flexibelt rutnät för en sådan sida.

    Tja, först måste vi göra lite grundläggande HTML-uppmärkning.






    Här har vi ett block som innehåller hela sidan, det innehåller ett block med en blogg, som innehåller 2 block: huvuddelen av sidan och sidofältet.

    Så hela vår sida blir 960px stor. Hela rutnätet är uppdelat i 12 kolumner på 69px. varje. Bloggdelen blir 900px bred. Huvuddelen av sidan kommer att vara 566px, sidofält - 331px.

    Detta är vad vi får till slut

    #sida (
    marginal: 36px auto;
    bredd: 960px;
    }

    Blogg (
    marginal: 0 auto 53px;
    bredd: 900px;
    }

    Blog.main (
    flyta till vänster;
    bredd: 566px;
    }

    Blogg .sidebar (
    flyta: höger;
    bredd: 331px;
    }

    Allt skulle vara bra, men som du kan se är allt detta statiskt, definierat i pixlar. Vi vill att vårt rutnät ska ändra storlek beroende på vilken skärm sidan visas på, därför måste vi ställa in allt i procent. Nu gör vi det.

    För detta finns samma formel som för typsnitt

    mål / sammanhang = resultat

    Låt oss konvertera ett block av hela sidan från pixlar till procent.

    #sida (
    marginal: 36px auto;
    bredd: 90%;
    }

    90% valdes eftersom vi i detta fall även kommer att ha 5% marginaler längs kanterna. Du kan dock välja ett annat värde.

    Vi använder vår formel: 900 / 960 = 0,9357

    Låt oss multiplicera resultatet med 100 för att få procent och skriva det i vår css.

    Blogg (
    marginal: 0 auto 53px;
    bredd: 93,75%;
    }

    Samma sak måste göras med kolumnerna, men märk att sammanhanget har ändrats. Därför att kolumnerna är inne i ett block med .blog-klassen, då blir det sammanhanget. Låt oss räkna ut.

    566 ÷ 900 = .628888889

    331 ÷ 900 = .367777778

    Vi omvandlar allt till procent och skriver det i stilmallen.

    Blog.main (
    flyta till vänster;
    bredd: 62,8888889%;
    }

    Blogg .sidebar (
    flyta: höger;
    bredd: 36,7777778%;
    }

    Det är allt! Nu har vi ett flexibelt rutnät och kan använda det för layout.

    Som du kan se är allt väldigt enkelt. Grunden för ett flexibelt rutnät, som ett flexibelt typsnitt, är samma formel, och kom ihåg vilken du enkelt kan skapa responsiva webbplatser.

    Anteckningen! Som ni ser hamnade vi på ganska långa procentvärden. Vissa kanske råder dig att avrunda dem, men du bör aldrig göra detta! Kom ihåg!

    Och det var allt för mig, tack för din uppmärksamhet och framgångsrika adaptiva layout!
    

    2024 gtavrl.ru.