Wakati wa kubuni wavuti yako, ni muhimu kuhakikisha kuwa inaonekana nzuri kwenye kifaa chochote, bila kujali saizi ya skrini na umbo. Tovuti zenye msikivu zimeundwa kuonekana nzuri kwenye kila aina ya vifaa vya kisasa kama kompyuta, simu, vidonge, TV, vifaa vya kuvaa, na hata skrini za gari. Ili kufanya wavuti kujibu, itabidi urekebishe msimbo wako wa CSS na HTML ili kubadilisha ukubwa wa kiatomati kiatomati kulingana na hali maalum. WikiHow hukufundisha jinsi ya kupanga na kutekeleza muundo msingi wa wavuti msikivu.
Hatua
Njia 1 ya 3: Kupanga Kubuni Msikivu
Hatua ya 1. Tafuta jinsi wasikilizaji wako wanavyotumia wavuti yako
Siku hizi, watu wengi wanaovinjari wavuti hufanya hivyo kutoka kwa simu za rununu na vidonge. Ili wavuti iwe msikivu, lazima uhakikishe inaonyeshwa vizuri bila kujali inapotazamwa. Ikiwa wakati na pesa ni muhimu, zingatia aina za vifaa ambavyo ni maarufu zaidi kwa watumiaji wako (ikiwa habari hii inapatikana) na jinsi wanavyotumia wavuti yako. Kutumia programu yako ya uchanganuzi au aina nyingine ya utafiti, tafuta:
- Ni aina gani ya vifaa wanavyotumia mara nyingi kutazama wavuti, wakizingatia sana simu ya rununu / kompyuta kibao / chapa za kompyuta na saizi za skrini / azimio.
- Je! Vivinjari gani vinajulikana sana na watumiaji wako. Kwa kadiri ya takwimu za ulimwengu, Google Chrome ni kivinjari maarufu zaidi ulimwenguni, lakini Safari ni sekunde ya karibu.
- Jinsi wageni wako hutumia wavuti yako, kama vile muda wanaotumia kuiangalia, wapi wanaiangalia, na ni maudhui yapi maarufu zaidi. Hii inaweza kukusaidia kuamua ni aina gani ya yaliyomo ni muhimu kujumuisha na ambayo inaweza kuachwa.
Hatua ya 2. Kubuni mipangilio tofauti ya vifaa tofauti
Unaweza kutumia mchanganyiko wa CSS na JavaScript kugundua kifaa cha mtumiaji, na pia uwezo wake (ikiwa inasaidia Java, Flash, n.k.) na kuonyesha toleo fulani la wavuti yako ipasavyo. Maswali ya Vyombo vya Habari vya CSS ni muhimu sana kwa kuamua saizi / utatuzi wa kifaa.
Hatua ya 3. Akaunti ya aina tofauti za mwingiliano
Mgeni wako anaweza kuwa akiwasiliana na wavuti yako kwa kutumia panya, kibodi, skrini ya kugusa, au hata msomaji wa skrini kwa watu wasio na uwezo wa kuona. Kwa kuzingatia hii, wavuti yako inapaswa kujibu kubofya panya, funguo za kibodi (Tab, Ingiza, Rudisha, n.k.) na kugusa vidole.
Athari za hover hazifanyi kazi na chochote isipokuwa panya. Badala ya kutumia athari hizi, unaweza kutumia kuhitaji mgeni kubonyeza kitufe au ikoni kuonyesha chochote kilichoonyeshwa hapo awali kwenye hover ya panya
Hatua ya 4. Fikiria kutumia Mfumo wa Usimamizi wa Maudhui (CMS)
Njia rahisi ya kuhakikisha muundo wako wa wavuti ni msikivu ni kutumia CMS na mandhari ya msikivu iliyojengwa hapo awali. Kutumia CMS kama Joomla, Drupal, au Wordpress hukuruhusu kuhakikisha kuwa wavuti yako inaonekana nzuri kwenye vifaa vyote bila kuandikia vitu vyenye kujibu mwenyewe. Wasiliana na mtoa huduma wako wa wavuti kuona ni zana gani za CMS zinapatikana na huduma yako.
Hatua ya 5. Tumia zana za mkondoni kujaribu tovuti yako
Sasa muundo huo wa msikivu wa wavuti umeongezeka kwa umaarufu, kuna zana anuwai za bure ambazo unaweza kutumia kujaribu tovuti yako. Ikiwa tayari umeandika tovuti yako, tumia zana hizi kujaribu jinsi inavyoonekana katika hali anuwai ili ujue ni wapi unahitaji kuboresha mwitikio:
- Mtihani wa Kirafiki wa Kirafiki na Google: Inakujulisha ikiwa tovuti yako inafanya kazi pia kwenye vifaa vya rununu kama inavyofanya kwenye skrini za kompyuta.
- resizeMyBrowser: Inakuwezesha kutazama tovuti yako katika maazimio tofauti.
- Jibu: Inaonyesha tovuti yako kwenye skrini tofauti za kifaa katika mipangilio tofauti (kando au upande wa kulia).
Njia 2 ya 3: Kufanya Mpangilio wa Ukurasa Msikivu
Hatua ya 1. Fikiria mfumo wa bure wa jibu la mtindo
Mfumo ni seti ya maandishi ya HTML, CSS, na / au JavaScript ambayo unaweza kutumia kama mifupa ya tovuti yako. Mfumo umejaribiwa na kuboreshwa kufanya kazi na vivinjari vyote, kwa hivyo utahitaji kufanya ni kuingiza yaliyomo, ongeza media yako na upendeleo wa rangi, na uchapishe tovuti yako. Mifumo mingine maarufu ni:
- Kamba ya Boot
- Mifupa
- Msingi
Hatua ya 2. Weka uwanja wa kutazama na tag ya meta
Ikiwa hautumii mfumo, utahitaji kuanza na jambo muhimu zaidi la kuweka alama kwenye wavuti inayojibika: Viewport. Sehemu ya kutazama ni sehemu ya wavuti inayoonekana kwa mtumiaji. Kitufe cha kufanya onyesho la wavuti yako vizuri bila kujali saizi ya skrini ni kupima ukubwa wa uwanja wa kutazama kwenye lebo ya META. Ili kufanya hivyo, jumuisha lebo hii juu ya kila ukurasa kwenye wavuti:
Hatua ya 3. Taja saizi ya maandishi kuhusiana na uwanja wa kutazama
Mara tu kituo chako cha kutazama kimewekwa, maandishi kwenye ukurasa wako yatakua ili kutoshea skrini. Walakini, fonti zinaweza kuonyesha kubwa sana au ndogo sana ikiwa saizi zao hazijainishwa kuhusiana na uwanja wa kutazama. Unaweza kufanya hivyo kwa kufafanua saizi ya fonti kama asilimia maalum ya uwanja wa kutazama na kitengo cha vw. Mfano huu unawaambia vichwa vya H1 kuonyesha kwa 10% ya upana wa uwanja wa kutazama, bila kujali saizi yake:
wikiHow
Hatua ya 4. Tumia maswali ya media kuonyesha mitindo tofauti kwa saizi tofauti za skrini
Maswali ya media hukuruhusu kuchagua ikiwa utaonyesha vitu kadhaa vya CSS kulingana na saizi ya skrini. Unaweza kutaja maalum ya swala lako la media kwenye faili yako ya CSS. Katika mfano huu, rangi ya asili ya mwili itakuwa nyekundu ikiwa saizi ya skrini ya mtumiaji ni 480px au kubwa:
wikiHow
Screen ya @media na (upana-upana: 480px) {mwili {rangi-asili: aqua; }}
Njia ya 3 ya 3: Kufanya Picha Zisikilizwe
Hatua ya 1. Tumia mali ya upana wa CSS kupima picha
Badala ya kuweka upana wa picha kwa idadi maalum ya saizi (k., 500px), tumia asilimia (k., 100%) ili picha iangalie upana wa mzazi wake na urekebishe ipasavyo. Kuweka upana wa picha kwa 100% hulazimisha picha hiyo kupanda juu na chini kulingana na saizi ya skrini ya mtazamaji. Ili kufanya hivyo mkondoni:
Hatua ya 2. Tumia mali ya upana upeo kupunguza ukubwa wa picha halisi
Ikiwa unatumia mali ya upana katika hatua ya awali kupima picha hadi 100%, picha hiyo itakua au itapungua ili kutoshea 100% ya chombo chake bila kujali saizi. Hii inamaanisha kuwa ikiwa picha iko upande mdogo, itakua kubwa kuliko saizi yake ya asili na kuonekana kwa ubora mdogo. Ili kuzuia hili kutokea, tumia upana wa kiwango cha juu kuweka ukubwa wa upeo wa picha kuwa 100% (saizi yake halisi). Hapa kuna jinsi:
Hatua ya 3. Tumia kipengee cha picha cha HTML kuonyesha picha tofauti kwenye saizi tofauti za skrini
Ikiwa unataka kuunda picha zenye ukubwa wa kawaida kuonyesha kwenye skrini tofauti tofauti, unaweza kutaja ni picha zipi zitaonyeshwa kwenye nambari yako ya HTML. Unda picha za ukubwa tofauti, na kisha utumie nambari hii kama mfano wa kubainisha picha ipi utumie kwenye skrini za upana wa 600px na 1500px:
