Izstrādājot savu vietni, ir svarīgi pārliecināties, ka tā izskatās lieliski jebkurā ierīcē neatkarīgi no ekrāna izmēra un formas. Adaptīvās vietnes ir veidotas tā, lai tās labi izskatītos visās mūsdienu ierīcēs, piemēram, datoros, tālruņos, planšetdatoros, televizoros, valkājamos un pat automašīnu ekrānos. Lai vietne būtu atsaucīga, jums ir jāpārveido CSS un HTML kods, lai automātiski mainītu tās elementu izmērus atkarībā no konkrētiem apstākļiem. Šajā vietnē wikiHow tiek mācīts, kā plānot un īstenot atsaucīgu tīmekļa dizainu.
Soļi
1. metode no 3: atsaucīga dizaina plānošana
1. solis. Uzziniet, kā jūsu auditorija izmanto jūsu vietni
Mūsdienās lielākā daļa cilvēku, kas pārlūko tīmekli, to dara, izmantojot mobilos tālruņus un planšetdatorus. Lai vietne būtu atsaucīga, jums ir jāpārliecinās, ka tā tiek parādīta pareizi neatkarīgi no tā, kur tā tiek skatīta. Ja laiks un nauda ir ļoti svarīgi, koncentrējieties uz to ierīču veidiem, kuras ir vispopulārākās jūsu lietotāju vidū (ja šī informācija ir pieejama) un kā viņi izmanto jūsu vietni. Izmantojot savu analītikas programmatūru vai kādu citu pētījumu veidu, uzziniet:
- Kādas ierīces viņi visbiežāk izmanto vietnes skatīšanai, īpašu uzmanību pievēršot mobilo tālruņu/planšetdatoru/datoru zīmoliem un ekrāna/izšķirtspējas izmēriem.
- Kuras pārlūkprogrammas ir vispopulārākās jūsu lietotāju vidū. Kas attiecas uz globālo statistiku, Google Chrome ir vispopulārākais tīmekļa pārlūks visā pasaulē, bet Safari ir tuvu otrais.
- Kā jūsu apmeklētāji izmanto jūsu vietni, piemēram, cik daudz laika viņi pavada tās skatīšanai, kur to skatās un kurš saturs ir vispopulārākais. Tas var palīdzēt noteikt, kāda veida saturu ir svarīgi iekļaut un kuru var izlaist.
Solis 2. Izstrādājiet dažādus izkārtojumus dažādām ierīcēm
Varat izmantot CSS un JavaScript kombināciju, lai noteiktu lietotāja ierīci, kā arī tās iespējas (neatkarīgi no tā, vai tā atbalsta Java, Flash utt.) Un attiecīgi parādītu noteiktu vietnes versiju. CSS multivides vaicājumi ir īpaši noderīgi, lai noteiktu ierīces izmēru/izšķirtspēju.
3. darbība. Ievērojiet dažāda veida mijiedarbības veidus
Jūsu apmeklētājs varētu mijiedarboties ar jūsu vietni, izmantojot peli, tastatūru, skārienekrānu vai pat ekrānlasītāju cilvēkiem ar redzes traucējumiem. Ņemot to vērā, jūsu vietnei vajadzētu reaģēt uz peles klikšķiem, tastatūras taustiņiem (Tab, Enter, Return utt.) Un ekrāna pirkstu pieskārieniem.
Pārvietošanās efekti nedarbojas ar neko, izņemot peli. Tā vietā, lai izmantotu šos efektus, varat pieprasīt, lai apmeklētājs noklikšķina uz pogas vai ikonas, lai parādītu visu, kas iepriekš tika parādīts, virzot peles kursoru
4. solis. Apsveriet iespēju izmantot satura pārvaldības sistēmu (CMS)
Vienkāršs veids, kā nodrošināt vietnes dizaina atsaucību, ir izmantot CMS ar iepriekš izveidotu adaptīvu tēmu. Izmantojot CMS, piemēram, Joomla, Drupal vai Wordpress, varat nodrošināt, ka jūsu vietne izskatās lieliski visās ierīcēs, bez nepieciešamības kodēt reaģējošos elementus. Sazinieties ar savu tīmekļa mitināšanas pakalpojumu sniedzēju, lai uzzinātu, kuri CMS rīki ir pieejami jūsu pakalpojumā.
5. Izmantojiet tiešsaistes rīkus, lai pārbaudītu savu vietni
Tagad, kad atsaucīgā tīmekļa dizaina popularitāte ir palielinājusies, ir pieejami dažādi bezmaksas rīki, ko varat izmantot savas vietnes pārbaudei. Ja esat jau kodējis savu vietni, izmantojiet šos rīkus, lai pārbaudītu, kā tā izskatās dažādos apstākļos, lai jūs zinātu, kur nepieciešams uzlabot reaģētspēju:
- Google pārbaudījums mobilajām ierīcēm: ļauj uzzināt, vai jūsu vietne darbojas tikpat labi mobilajās ierīcēs kā datora ekrānos.
- resizeMyBrowser: ļauj apskatīt savu vietni dažādās izšķirtspējās.
- Atbildētājs: parāda jūsu vietni dažādos ierīču ekrānos dažādos izkārtojumos (sānos vai labajā pusē uz augšu).
2. metode no 3: Lapas izkārtojuma pielāgošana
1. solis. Apsveriet bezmaksas adaptīvo stila lapu ietvaru
Sistēma ir iepriekš rakstīts HTML, CSS un/vai JavaScript komplekts, ko varat izmantot kā savas vietnes skeletu. Visi ietvari ir pārbaudīti un optimizēti darbam ar visām pārlūkprogrammām, tāpēc viss, kas jums jādara, ir ievietot saturu, pievienot multivides un krāsu preferences un publicēt vietni. Daži populāri ietvari ir:
- Bootstrap
- Skelets
- Fonds
2. solis. Iestatiet skata punktu ar metatagu
Ja jūs neizmantojat ietvaru, jūs vēlaties sākt ar vissvarīgāko adaptīvās vietnes kodēšanas aspektu: skatu. Skata logs ir tā vietnes daļa, kas ir redzama lietotājam. Galvenais, lai jūsu vietne tiktu parādīta pareizi neatkarīgi no ekrāna lieluma, ir skata porta izmēra mērogošana META tagā. Lai to izdarītu, iekļaujiet šo tagu katras vietnes lapas augšpusē:
3. solis. Norādiet teksta lielumu attiecībā pret skatu
Kad skata logs ir iestatīts, jūsu lapas teksts tiks pielāgots ekrānam. Tomēr fonti var parādīties pārāk lieli vai pārāk mazi, ja to izmēri nav norādīti attiecībā pret skatu. To var izdarīt, ar vw vienību definējot fonta lielumu kā noteiktu skata punkta procentuālo daļu. Šajā piemērā H1 galvenes tiek rādītas 10% no skatlogu platuma neatkarīgi no tā lieluma:
wikiHow
4. solis. Izmantojiet multivides vaicājumus, lai parādītu dažādus stilus dažādiem ekrāna izmēriem
Multivides vaicājumi ļauj izvēlēties, vai parādīt noteiktus CSS elementus atkarībā no ekrāna lieluma. Savā multivides vaicājuma specifiku varat norādīt savā CSS failā. Šajā piemērā ķermeņa fona krāsa kļūs sarkana, ja lietotāja ekrāna izmērs ir 480 pikseļi vai lielāks:
wikiHow
@media screen un (min-width: 480px) {body {background-color: aqua; }}
3. metode no 3: attēlu pielāgošana
1. darbība. Izmantojiet CSS platuma rekvizītu, lai mērogotu attēlus
Tā vietā, lai attēla platumu iestatītu uz noteiktu pikseļu skaitu (piemēram, 500 pikseļi), izmantojiet procentuālo vērtību (piemēram, 100%), lai attēls izskatītos pēc tā platuma un attiecīgi pielāgotos. Iestatot attēla platumu līdz 100%, attēls tiek palielināts un samazināts atkarībā no skatītāja ekrāna lieluma. Lai to izdarītu rindā:
2. darbība. Izmantojiet rekvizītu max-width, lai ierobežotu attēla faktiskā izmēra mērogošanu
Ja iepriekšējā darbībā izmantojat platuma rekvizītu, lai mērogot attēlu līdz 100%, attēls palielināsies vai saruks, lai ietilptu 100% no konteinera neatkarīgi no tā lieluma. Tas nozīmē, ka, ja attēls atrodas mazākajā pusē, tas palielināsies vairāk nekā sākotnējais izmērs un izskatīsies zemākas kvalitātes. Lai tas nenotiktu, izmantojiet maksimālo platumu, lai iestatītu attēla maksimālo mērogošanas lielumu uz 100% (tā faktiskais lielums). Lūk, kā:
3. solis. Izmantojiet HTML attēla elementu, lai parādītu dažādus attēlus dažādos ekrāna izmēros
Ja vēlaties izveidot pielāgota izmēra attēlus, lai tos parādītu dažāda lieluma ekrānos, varat norādīt, kurus fotoattēlus rādīt HTML kodā. Izveidojiet dažāda lieluma attēlus un pēc tam izmantojiet šo kodu kā piemēru, lai norādītu, kuru attēlu izmantot 600 un 1500 pikseļu platuma ekrānos:
