Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Inspisere Nettsider | Responsivt Webdesign i CSS
Avanserte CSS-teknikker

bookInspisere Nettsider

Å lage responsive og adaptive oppsett er en avgjørende del av moderne webutvikling. Vi ønsker alltid en nettside som er tilgjengelig på alle enheter. Heldigvis har webutviklere tilgang til et omfattende sett med verktøy som er innebygd i nettleserne.

La oss se nærmere på Chrome sine utviklerverktøy:

Verktøy

For å få tilgang til de responsive verktøyene og begynne å bruke dem, trenger vi følgende:

  1. Åpne utviklerverktøyene som vi gjorde tidligere. Mulige måter er: bruke musen, høyreklikke og velge feltet "Inspiser", eller bruke hurtigtasten "Ctrl+Shift+I" (Windows, Linux) eller "Command+Option+I" (Mac);
  2. Klikk på 5-ikonet. Da aktiveres responsiv modus. For å lukke responsiv modus, klikker vi igjen på 5-ikonet.

Tilleggsfunksjoner:

  1. Vi kan endre (imitere) enhetens bredde ved å dra elementet 6;
  2. Vi kan velge en bestemt enhet ved hjelp av feltet 1. Det finnes noen utbredte enheter som brukere benytter mest;
  3. Vi kan angi bredde (felt 2) og høyde (felt 3) for enhetens skjermstørrelse;
  4. Vi kan endre skalaen (felt 4). Dette brukes vanligvis når vi arbeider med store verdier og trenger å se hele oppsettet;
  5. 7 er visningsområdet (viewport). Vi ser nettsidens visning for en slik bredde og høyde på skjermen.

Merk

Alle moderne nettlesere (f.eks. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, osv.) har det samme settet med verktøy. Det spiller ingen rolle hvilken nettleser vi velger.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 6. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookInspisere Nettsider

Sveip for å vise menyen

Å lage responsive og adaptive oppsett er en avgjørende del av moderne webutvikling. Vi ønsker alltid en nettside som er tilgjengelig på alle enheter. Heldigvis har webutviklere tilgang til et omfattende sett med verktøy som er innebygd i nettleserne.

La oss se nærmere på Chrome sine utviklerverktøy:

Verktøy

For å få tilgang til de responsive verktøyene og begynne å bruke dem, trenger vi følgende:

  1. Åpne utviklerverktøyene som vi gjorde tidligere. Mulige måter er: bruke musen, høyreklikke og velge feltet "Inspiser", eller bruke hurtigtasten "Ctrl+Shift+I" (Windows, Linux) eller "Command+Option+I" (Mac);
  2. Klikk på 5-ikonet. Da aktiveres responsiv modus. For å lukke responsiv modus, klikker vi igjen på 5-ikonet.

Tilleggsfunksjoner:

  1. Vi kan endre (imitere) enhetens bredde ved å dra elementet 6;
  2. Vi kan velge en bestemt enhet ved hjelp av feltet 1. Det finnes noen utbredte enheter som brukere benytter mest;
  3. Vi kan angi bredde (felt 2) og høyde (felt 3) for enhetens skjermstørrelse;
  4. Vi kan endre skalaen (felt 4). Dette brukes vanligvis når vi arbeider med store verdier og trenger å se hele oppsettet;
  5. 7 er visningsområdet (viewport). Vi ser nettsidens visning for en slik bredde og høyde på skjermen.

Merk

Alle moderne nettlesere (f.eks. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, osv.) har det samme settet med verktøy. Det spiller ingen rolle hvilken nettleser vi velger.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 6. Kapittel 4
some-alt