Responsiv design är tanken på att få din webbplats att se snygg ut i vilken upplösning som helst, inte bara på stationära och mobila enheter. Med en responsiv webbplats är din stationära och mobila webbplats samma sida och skala med fönsterstorlek.
Vad är responsiv design?
< p>Responsiv design gör att din webbplats kan ändra storlek för att passa vilken skärm som helst. I stället för att designa runt en specifik layout eller att designa en separat mobil- och stationär webbplats, bör din webbplats skala för att passa alla enheter. I den verkliga världen kommer människor att använda din webbplats på alla möjliga sätt; det finns små telefoner, stora telefoner, surfplattor, surfplattor i liggande läge, netbooks, bärbara datorer och 5K iMac.
Ta en titt på howtogeek.com hemsida. På skrivbordet har den en rubrik med en logotyp, huvudkategorier, sociala medieknappar och slutligen en hamburgarmeny med utökade kategorier. Artikellådorna är upplagda i ett rutnät som skalas med skärmstorlek men bara kommer att ta cirka 1000 pixlar (eftersom att skala upp för mycket skulle se konstigt ut). Sammantaget finns det mycket utrymme att arbeta med, så webbplatsen ser bäst ut här.
Krympa skärmen lite till surfplattans storlek, och det finns inte så mycket utrymme. Texten bryts annorlunda, bilderna skalas ner eller beskärs och huvudkategorierna försvinner.
Artikellådorna bibehåller layouten men kostar att ha extra textrader. Försidan artikeln är dock viktigare, och kommer att behålla sitt bildförhållande och skala ner utan beskärning.
Annons
Och på riktigt små enheter har du inte riktigt råd att ha alla de knapparna i menyn, och det finns inte tillräckligt med utrymme för att placera artikellådorna bredvid varandra, så att menyn faller ihop till en hamburgare menyn och artikellådorna läggs upp i en kolumn. Den här kolumnen tar alltid hela enhetens bredd (minus 20 pixlar på varje sida för vaddering).
Du kan testa detta själv för att se hur din webbplats skalas. Öppna Chrome: s utvecklarverktyg genom att högerklicka var som helst och välja “ Inspektera. ” Tryck på knappen för mobila enheter i det övre högra hörnet av rutan som dyker upp och välj “ Responsive ” som enhetstyp:
Du kan ta tag i handtagen kanten på din webbplats för att justera storleken, eller så kan du ange manuella pixelvärden. Du kan också förhandsgranska hur det kommer att se ut på populära mobilupplösningar (även om du fortfarande bör testa på en riktig enhet).
Hur fungerar responsiv design?
Innan du gör en responsiv design måste du åtgärda ett fel med mobilsidor och visningsporten. Utan denna metatagg i HTML -rubriken kan din mobilsida zooma ut och inte visas korrekt. Detta kan redan vara inställt, eftersom det är en ganska vanlig pannplatta, men om det inte är det, fortsätt och lägg till det:
& lt; meta content = “width = device-width, initial -scale = 1 “name =” viewport ” /& gt;
Det primära sättet att göra webbplatser lyhörda är med den magiska displayen: flex -egenskap, annars känd som flexbox. Flexbox fungerar genom att justera storleken på föremålen i en behållare för att skala med en förändrad fönsterstorlek. Du börjar med att skapa en behållare och ställa in den för att visa: flex:
.container {display: flex; }
Och ställ sedan in flexparametern för alla barn:
.child {flex: 1; } Annons
Detta kommer att göra att barnen expanderar och tar så mycket plats som behållaren tillåter. Om du till exempel hade två barn skulle var och en ta upp 50% av utrymmet:
Om du istället ställer in det andra barnet till flex: 2, skulle det ta upp till två gånger mycket utrymme som det andra (totalt 66%).
När skärmen krymper kommer barnen att krympa med den. De kommer inte att nå en punkt där de inte kan krympa mindre än storleken på deras innehåll, men du kan få dem att linda runt till en annan rad (precis som text) med flex-wrap på behållaren.
.container {flex-wrap: wrap; }
Nu kommer du aldrig att stöta på problem med att ha webbplatsens innehåll utanför skärmen eller så krympt upp att det är oläsligt.
En annan del av CSS -tekniken bakom responsiv design är mediefrågor. Mediefrågor är som CSS If -påståenden som gör att du kan kontrollera ett värde innan du använder vissa CSS. Du kan använda detta för att dynamiskt utforma komponenter baserat på webbläsarens bredd. Om du till exempel hade en toppmeny som du ville dölja på mobilen och ersätta med en hamburgarmeny kan du dölja den med en @media -fråga:
.topmenu {display: block} @media -skärm och (max -bredd: 600px) {.topmeny {display: none; }}
600px är bara ett godtyckligt värde som används för att definiera gränserna för de flesta mobila enheter, men du kan ha många brytpunkter som ändrar utformningen. Du kan använda dessa i kombination med flexbox för att ändra flexegenskaperna baserat på enhetens storlek; till exempel är en vanlig användning att horisontella listor visas vertikalt och mittjusterade, för enklare läsbarhet på mobilen.
Annonsering
Det finns mycket mer för responsiv design än vad vi kan täcka här, så om du vill lära dig mer om CSS bakom kan du läsa den här fantastiska guiden för flexbox från CSS-trick eller läsa W3Schools-dokumentationen för mediefrågor.
Hur gör jag min webbplats lyhörd?
Om du inte vill lägga tid på att göra om din webbplats med flexbox i åtanke finns det gott om responsiva webbplatsmallar som du kan använda som bas, inklusive många gratis. Många mallar som du kan använda med hanterade värdleverantörer (GoDaddy, SquareSpace, Wix, etc.) kommer att reagera direkt. Underscores är en bra gratis startmall för WordPress.
Om du vill koda det själv, men inte vill göra allt för hand, finns det många tredjepartsbibliotek för att arbeta med flexbox. Den mest populära av dessa är Bootstrap, som lägger till lättanvända klasser för att arbeta med flexbox (tillsammans med många andra användbara UI-element). Med Bootstrap anger du behållare med radklassen och anger sedan kolumnstorlek med klasser som col-md-6, och CSS hanteras åt dig. Till exempel kommer följande kod att ordna varje div i en rad med tre på skrivbordet och lägga till en brytpunkt för mediefrågan för att göra den till en kolumn i full bredd på mobilen:
& lt; div class = “row” & gt; & lt; div class = “col-md-4 col-sm-12” & gt; //innehåll & lt;/div & gt; & lt; div class = “col-md-4 col-sm-12” & gt; //innehåll & lt;/div & gt; & lt; div class = “col-md-4 col-sm-12” & gt; //innehåll & lt;/div & gt; & lt;/div & gt;
Storlekar mäts av 12, så col-md-4 kommer att ställa div till 33% bredd på medelstorlek (“md”) och col-sm-12 kommer att ställa in det till 100% bredd på små enheter (” sm “).
Bootstrap har också massor av teman och mallar som du kan börja med. Det är utformat för att få dig från marken mycket snabbt och för att bli av med tiden som rörs med pannplatta HTML och CSS (därav namnet).