Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Inspektera Webbsidor | Responsiv Webbdesign i CSS
Avancerade CSS-tekniker

bookInspektera Webbsidor

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.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookInspektera Webbsidor

Svep för att visa menyn

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.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 4
some-alt