Varför ska du använda rembaserade layouter

De rem Enhet används för att definiera teckensnitt i relativa termer snarare än med en absolut storlek i pixlar. Men visste du att den här enheten är användbar för layouter och typografi?

I den här videoprocessen från min CSS Layout-kurs lär du dig varför det är en stor fördel att använda rem enheter för layouter.

Fördelarna med rembaserade layouter

I CSS Layout-kursen görs alla våra layoutspecifikationer med hjälp av rem enhet. Som vi nämnde mer i typografi kursen, a rem Enheten är en multipel av root-typsnittstorleken för din sida.

De rem Enheten är användbar inte bara typografi utan också för din layout, och jag ska visa dig varför du ska använda rem enheter när du ställer in din layout. 

Låt oss börja med en titt på den provsida vi jobbar med:

Om jag sedan ändrar teckenstorleken i webbläsaren kan du se att teckenstorleken ökar på sidan:

Om jag fortsätter att öka textstorleken och jag uppdaterar, kan du nu se att hela layouten har anpassats för att ta hänsyn till den större teckensnittstorleken. 

Allt är fortfarande läsbart, och det är möjligt för att använda rem enheter för att ställa in hela vår layout, ser vi till att allt är flexibelt beroende på root-typsnittets storlek i vårt dokument, vilket kommer från webbläsarinställningarna.

På samma sätt, om jag minskar vår textstorlek till en riktigt liten storlek och uppdaterar igen, kan du se att hela layouten har krympt ner en gång till. 

Så genom att använda dessa rem enheter, så försäkrar vi oss om att när en användare ändrar teckensnittsstorleken, ändras inte texten i sig, men det gör också hela layouten.

Titta på hela kursen

I hela kursen, Börja här: Läs CSS Layout, du lägger vad du har lärt dig i den här videon i praktiken genom att skapa en mängd olika layouter med hjälp av rem enheter. Du lär dig allt du behöver veta för att skapa de vanligaste typerna av layouter i webbdesign. Vi täcker dimensionering, anpassning, avstånd och bästa praxis för att skapa responsiv CSS.

Om du bara har börjat och vill behärska CSS, kolla in Learn CSS: The Complete Guide.

Eller du kan experimentera med fler kurser från vår "Start Here" -serie för webbdesigners:

• Börja här: Läs HTML-grunderna
• Börja här: Läs CSS Typografi
• Börja här: Lär CSS färger och bakgrunder