Responsiv design är överallt, och om du använder en ram eller skriver mediefrågor själv, är vissa element på din sida bundna att flytta eller skala.

Om dina mediafrågor är baserade på webblederdimensioner och webbläsaren ändras, kommer dina element att hoppa på plats. Att lägga till lite animering till de här egenskaperna är en fin touch för alla lyhörda platser.

Idag ska jag visa dig hur lätt det är att lägga till den extra touchen, genom att animera bredden och opaciteten av element mellan mediefrågor.

Layouten

För det här enkla exemplet använder vi en div, som innehåller 3 mindre divs. Delen kommer att skala efter storleken på webbläsarfönstret. HTML är enkelt:

Nu kommer vår huvudsakliga CSS att placera de tre rutorna i huvud div och också, i linje med en marginal till höger:

.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}

Detta är vår huvudsakliga layout, utan mediefrågor. Denna layout anpassas inte om visningsporten ändras. Nu när vi har grunderna på plats, låt oss lägga till mediafrågorna.

Lägga till mediefrågor

Mediasökningar används ofta idag. De flesta webbdesigners förstår dem, men om det här är första gången är det en snabb uppdatering: Mediasökningar kontrollerar egenskapen hos den enhet du använder (bredd, orientering och upplösning) och de kör specifika CSS om villkoren för media förfrågan är uppfylld. I vårt exempel använder vi två mediefrågor som kontrollerar om webbläsaren är mindre än 960px och om den är mindre än 660px. Vi ställer sedan in elementets bredd i enlighet med detta, vi kommer också att gömma den sista barnen div så att de andra två har mer utrymme:

@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}

Det är allt vi behöver för våra mediefrågor. Observera att det är viktigt att den här koden placeras under den ursprungliga CSS-koden ovan så att mediafrågorna skriver över koden ovanför dem. Om du testar din fil nu ser du storleken på divs som ändras och opaciteten för det sista barnet div ändras när du ändrar storleken på webbläsarfönstret.

Du märker det för att dölja det sista barnet div vi ställer upp sin opacitet till 0 istället för att ställa in den för att visa: ingen. Det beror på att vi vill kunna animera fastigheten; opacitet har många olika grader, medan displayen är antingen sann eller falsk (och kan därför inte animeras).

Lägger till animeringen

CSS-animationer har visat sig vara väldigt praktiska när du utför dessa små animeringar som vi brukade köra i jQuery, till exempel animerande färg, bredd och opacitet.

Eftersom vi vill att sidan ska animera som helhet använder vi * CSS-väljaren och ställer in vår animation. CSS-animationer försämras graciöst, men du vill också lägga till leverantörs prefix, så att det finns så mycket stöd som möjligt:

*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}

Du kan se det färdiga resultatet här.

Slutsats

Lägga till enkla animeringar som dessa, är en fin efterbehandling till vilken webbplats som helst. Några rader av kod lägger till en riktigt fin polish på din lyhörda sida.

Har du animerade mediafrågor i ett projekt? Vilka effekter har du uppnått? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, skala bild via Shutterstock.