Å 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.