Oprettelse af responsive og adaptive layouts er et afgørende aspekt af moderne webudvikling. Det er altid ønskværdigt, at en webside er tilgængelig på alle enheder. Heldigvis har webudviklere adgang til et omfattende sæt værktøjer, der er indbygget i webbrowsere.

Lad os se nærmere på Chrome webværktøjerne:

Værktøjer

For at få adgang til de responsive værktøjer og begynde at bruge dem, skal vi gøre følgende:

1. Åbn udviklerværktøjerne som tidligere beskrevet. Mulige metoder er: brug musen, højreklik og vælg feltet "Inspicér", eller brug tastaturgenvejen "Ctrl+Shift+I" (Windows, Linux) eller "Command+Option+I" (Mac);
2. Klik på 5-ikonet. Dette aktiverer responsiv tilstand. For at lukke responsiv tilstand skal du igen klikke på 5-ikonet.

Yderligere funktioner:

1. Vi kan ændre (imitere) enhedens bredde ved at trække i 6-elementet;
2. Vi kan vælge en bestemt enhed ved hjælp af feltet 1. Der er nogle udbredte enheder, som brugere oftest anvender;
3. Vi kan angive bredden (felt 2) og højden (felt 3) på enhedens skærmstørrelse;
4. Vi kan ændre skalaen (felt 4). Dette bruges generelt, når vi arbejder med store værdier og har behov for at se hele layoutet;
5. 7 er visningsområdet (viewport). Her ser vi websidens visning for den valgte bredde og højde på skærmstørrelsen.

Bemærk

Alle moderne browsere (f.eks. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge osv.) har det samme sæt værktøjer. Det er uden betydning, hvilken browser vi vælger.