Responsiv webb innebär att man bygger en webbplats som anpassar utseendet beroende på vilken skärmupplösning som besökaren har. Detta gör man med så kallade brytpunkter.

Det är dock viktigt att du tänker på att anpassa efter ditt innehåll på din webbplats och inte bara efter måttet på exempelvis en Iphone. Frågor som man kan ställas inför när man ska sätta dessa brytpunkter kan exempelvis vara:

• När börjar webbplatsen få problem med upplösningen?
• Blir texten svår att läsa?
• Hur hanterar vi menyn? När måste vi justera den?

Brytpunkter

En brytpunkt (media queries) innebär att man kan begränsa när viss CSS ska användas. I dagsläget kan man begränsa detta utifrån webbläsarens min-och maxbredd. Till brytpunkter kan man koppla olika inställningar:

• Grids - för att stapla kolumner
• Layouter/moduler - för att visa/dölja saker
• Egen CSS

Här kan man lägga till, ändra, ta bort och sortera brytpunkter.

Lägg till brytpunkt för telefon

Klicka på plusknappen för att lägga till en brytpunkt. Exempelvis om vi vill ha en brytpunkt för en telefon Då ställer vi in att största bredden ska vara 480px.

Ett nytt fönster öppnas.

• Namn (Obligatoriskt) - Arbetsnamnet på brytpunkten som kommer att synas i SiteVision.
• Beskrivning - En beskrivning av brytpunkten så att redaktörer/administratörer förstår när den används osv.
• CSS-klassnamn (Obligatoriskt)- Här anger man ett CSS-klassnamn för sin brytpunkt. Utifrån det man anger här kommer det att genereras två klassnamn sv-visible-<klassnamn> och sv-hide-<klassnamn>. Dessa kommer att användas när man ska dölja/visa saker i brytpunkter.
• Minsta bredd - Här ställer man in från vilken minsta bredd som denna brytpunkten ska gälla. Anger man ingen bredd så blir det från 0 till största bredd (i detta fall 0-480px).
• Största bredd - Här ställer man in till vilken bredd brytpunkten ska gälla.
• Koppla till grids - Här kan man lägga till kopplingar till grids för att man ska ha möjlighet att stapla kolumner i de angivna gridsen.
• Stapla kolumner - Denna inställning gäller om man bygger med grids. Om man kryssar i denna rutan så kommer alla kolumner att staplas på varandra istället för bredvid varandra.
• Marginal mellan staplade kolumner - Här kan man ställa in en marginal som visas när man staplar kolumner.
• Egen CSS- Här kan man ange egen css som bara ska gälla i denna brytpunkt.