Att skapa responsiva och adaptiva layouter är en avgörande del av modern webb­utveckling. Det är alltid önskvärt att en webbsida är tillgänglig på alla enheter. Lyckligtvis har webb­utvecklare tillgång till ett kraftfullt verktygs­utbud som är inbyggt i webbläsarna.

Låt oss titta på Chromes webbutvecklingsverktyg:

Verktyg

För att få tillgång till de responsiva verktygen och börja använda dem behöver vi följande:

1. Öppna utvecklarverktygen som vi gjorde tidigare. Möjliga sätt är: använda musen, högerklicka och välja fältet "Inspektera", eller använda tangentbordsgenvägen "Ctrl+Shift+I" (Windows, Linux) eller "Command+Option+I" (Mac);
2. Klicka på ikonen 5. Vi får responsivt läge. För att stänga det responsiva läget klickar vi återigen på ikonen 5.

Ytterligare funktioner:

1. Vi kan ändra (imitera) enhetens bredd genom att dra elementet 6;
2. Vi kan välja en specifik enhet med hjälp av fältet 1. Det finns några allmänt använda enheter som användare oftast använder;
3. Vi kan ställa in bredden (fält 2) och höjden (fält 3) för enhetens skärmstorlek;
4. Vi kan ändra skalan (fält 4). Vanligtvis används detta när vi arbetar med stora värden och behöver se hela layouten;
5. 7 är vyporten. Vi ser webbplatsens vy för en sådan bredd och höjd på skärmstorleken.

Obs

Alla moderna webbläsare (t.ex. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) har samma uppsättning verktyg. Det spelar ingen roll vilken webbläsare vi väljer.