Responsiivisten ja mukautuvien asettelujen luominen on olennainen osa nykyaikaista verkkokehitystä. Tavoitteena on aina verkkosivu, joka on saavutettavissa kaikilla laitteilla. Onneksi verkkokehittäjillä on käytössään laaja valikoima työkaluja, jotka on sisäänrakennettu verkkoselaimiin.

Tarkastellaan Chrome-selaimen kehitystyökaluja:

Työkalut

Jotta pääsemme käsiksi responsiivisiin työkaluihin ja voimme käyttää niitä, tarvitsemme seuraavat vaiheet:

1. Avaa kehittäjätyökalut kuten aiemmin. Mahdollisia tapoja ovat: hiiren oikealla painikkeella napsauttaminen ja "Tarkastele"-kentän valitseminen tai näppäinyhdistelmän "Ctrl+Shift+I" (Windows, Linux) tai "Command+Option+I" (Mac) käyttäminen;
2. Napsauta 5-kuvaketta. Siirrytään responsiiviseen tilaan. Sulje responsiivinen tila napsauttamalla uudelleen 5-kuvaketta.

Lisäominaisuudet:

1. Voimme muuttaa (jäljittää) laitteen leveyttä vetämällä 6-elementtiä;
2. Voimme valita tietyn laitteen kentän 1 avulla. Mukana on yleisimmin käytettyjä laitteita;
3. Voimme asettaa laitteen näytön leveyden (kenttä 2) ja korkeuden (kenttä 3);
4. Voimme muuttaa skaalaa (kenttä 4). Yleensä tätä käytetään suurilla arvoilla, kun halutaan nähdä koko asettelu;
5. 7 on näkymäalue (viewport). Näemme verkkosivun näkymän kyseisellä leveydellä ja korkeudella.

Huomio

Kaikissa nykyaikaisissa selaimissa (esim. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge jne.) on samat työkalut. Selaimen valinnalla ei ole merkitystä.