Jifunze jinsi vivinjari vya wavuti vinavyoamua kuonyesha kwa kutumia maadili ya asilimia
Wanafunzi wengi wa kubuni mtandao wa msikivu wana wakati mgumu kutumia asilimia kwa maadili ya upana. Hasa, kuna machafuko na jinsi kivinjari kinakadiriwa asilimia hizo. Chini utapata maelezo mafupi ya jinsi asilimia hufanya kazi kwa mahesabu ya upana kwenye tovuti ya msikivu.
Kutumia Pixels kwa Maadili ya Upana
Unapotumia saizi kama thamani ya upana, matokeo ni sawa sana. Ikiwa unatumia CSS ili kuweka thamani ya upana ya kipengele kwenye kichwa cha hati hadi saizi 100 pana, kipengele hicho kitakuwa ukubwa sawa na moja uliyoweka kwa saizi 100 pana kwenye maudhui ya tovuti au mchezaji au sehemu nyingine za ukurasa. Pixels ni thamani kamili, hivyo saizi 100 ni saizi 100 bila kujali wapi katika hati yako kipengele kinaonekana. Kwa bahati mbaya, wakati maadili ya pixel ni rahisi kuelewa, hawafanyi kazi vizuri katika tovuti za msikivu.
Ethan Marcotte aliunda neno "msikivu wa kubuni wavuti", akielezea mbinu hii ikiwa na vyuo 3 muhimu:
- Gridi ya maji
- Vyombo vya habari vya maji
- Maswali ya vyombo vya habari
Vipengele viwili vya kwanza, gridi ya maji na vyombo vya habari vya maji, vinapatikana kwa kutumia asilimia, badala ya saizi, kwa maadili ya ukubwa.
Kutumia Asilimia kwa Vigezo vya Upana
Unapotumia asilimia ili kuunda upana kwa kipengele, ukubwa halisi kwamba maonyesho ya kipengele atatofautiana kulingana na wapi katika waraka. Asilimia ni thamani ya jamaa, maana ukubwa unaonyeshwa ni sawa na mambo mengine katika waraka wako.
Kwa mfano, ukiweka upana wa picha hadi 50%, hii haimaanishi kwamba picha itaonyesha kwa nusu ya ukubwa wake wa kawaida. Hii ni wazo la kawaida.
Ikiwa picha ni nani 600 za upana, basi kutumia CSS thamani ya kuionyesha saa 50% haimaanishi kwamba itakuwa saizi 300 pana katika kivinjari cha wavuti. Thamani hii ya asilimia imehesabiwa kulingana na kipengele kilicho na picha hiyo, sio ukubwa wa asili wa picha yenyewe. Ikiwa chombo (ambacho kinaweza kuwa mgawanyiko au kipengele kingine cha HTML) ni pana pixels 1000, kisha picha itaonyeshwa kwa saizi 500 tangu thamani hiyo ni 50% ya upana wa chombo. Ikiwa kipengee kilicho ni saizi 400 pana, basi picha itaonyesha tu kwenye saizi 200, kwa kuwa thamani hiyo ni 50% ya chombo. Picha katika swali hapa ina ukubwa wa 50% ambayo inategemea kabisa kipengele kilicho na hiyo.
Kumbuka, kubuni msikivu ni maji. Layouts na ukubwa zitabadilika kama mabadiliko ya ukubwa / kifaa inabadilika . Ikiwa unafikiri juu ya hili katika maneno ya kimwili, yasiyo ya wavuti, ni kama kuwa na sanduku la kadi ambayo unajaza nyenzo za kufunga. Ikiwa unasema kwamba kisanduku kinapaswa kuwa nusu kilichojazwa na nyenzo hiyo, kiasi cha kufunga unachohitaji kitatofautiana kulingana na ukubwa wa sanduku. Vile vile ni kweli kwa upana wa asilimia katika kubuni wavuti.
Asilimia Kulingana na Asilimia Nyingine
Katika mfano wa picha / chombo, nilitumia maadili ya pixel kwa kipengee kilicho na kipengele cha kuonyesha jinsi picha ya msikivu itaonyesha. Kwa kweli, kipengee kilicho na kipengee pia kitawekwa kwa asilimia na picha, au vipengele vingine, ndani ya chombo hicho kitapata viwango vyao kulingana na asilimia ya asilimia.
Hapa kuna mfano mwingine unaoonyesha hili kwa mazoezi.
Sema una tovuti ambayo tovuti nzima imetolewa ndani ya mgawanyiko na darasa la "chombo" (kawaida ya utengenezaji wa mtandao wa mtandao). Ndani ya mgawanyiko huo ni mgawanyiko mwingine wa tatu ambao hatimaye mtindo utaonyesha kama safu tatu za wima. Hiyo HTML inaweza kuonekana kama hii:
Sasa, unaweza kutumia CSS ili kuweka ukubwa wa mgawanyiko huo wa "chombo" kusema 90%. Katika mfano huu, mgawanyiko wa chombo hauna kipengele kingine ambacho kinazunguka kinyume na mwili, ambacho hatukuweka kwa thamani yoyote maalum. Kwa default, mwili utatoa kama dirisha la kivinjari la 100%. Kwa hiyo, asilimia ya "chombo" ya mgawanyiko itategemea ukubwa wa dirisha la kivinjari. Kama kivinjari hiki kivinjari kinabadilika, basi ukubwa wa "chombo" hiki. Kwa hivyo kama dirisha la kivinjari ni saizi 2000 pana, mgawanyiko huu utaonyeshwa kwa saizi 1800. Hii imehesabiwa kama asilimia 90 ya 2000 (2000 x .90 = 1800)), ambayo ni ukubwa wa kivinjari.
Ikiwa kila mgawanyiko wa "col" uliopatikana ndani ya "chombo" imewekwa kwa ukubwa wa asilimia 30, basi kila mmoja wao atakuwa saizi 540 pana katika mfano huu. Hii imehesabiwa kama asilimia 30 ya saizi za 1800 ambazo chombo kinafanya saa (1800 x .30 = 540). Ikiwa tumebadilisha asilimia ya chombo hicho, mgawanyiko huu wa ndani utabadilika pia kwa ukubwa wanaoitoa kwa vile wanategemea kipengele hiki.
Hebu tufikiri kwamba madirisha ya kivinjari yanabakia saizi za 2000 pana, lakini tunabadilisha thamani ya asilimia ya chombo kufikia 80% badala ya 90%. Hiyo ina maana kwamba itatoa saa pixels 1600 pana sasa (2000 x .80 = 1600). Hata kama hatubadili CSS kwa ukubwa wa mgawanyiko wetu wa "col" 3, na kuacha kwa 30%, watatoa tofauti kwa sasa tangu kipengele kilicho na kipengele, ambacho ni hali ambayo ni ukubwa na, imebadilika. Hizi mgawanyiko 3 sasa zitatoa saizi 480 kila moja, ambazo ni 30% ya 1600, au ukubwa wa chombo (1600 x .30 = 480).
Kuchukua hili hata zaidi, ikiwa kulikuwa na picha ndani ya mojawapo ya mgawanyiko huu wa "col" na picha hiyo ilikuwa ukubwa kwa kutumia asilimia, hali ya ukubwa wake itakuwa "col" yenyewe. Kama mgawanyiko wa "kofu" ulibadilishwa kwa ukubwa, ndivyo picha ingekuwa ndani yake. Kwa hiyo ikiwa ukubwa wa kivinjari au "chombo" kilibadilishwa, hiyo ingeathiri mgawanyiko wa "col" tatu, ambao utabadilika ukubwa wa picha ndani ya "col." Kama unavyoweza kuona, haya yote yameunganishwa wakati inakuja kwa maadili yaliyoendeshwa na asilimia.
Unapofikiria jinsi kipengele ndani ya ukurasa wa wavuti kitatokea wakati thamani ya asilimia itatumiwa kwa upana wake, unahitaji kuelewa mazingira ambayo kipengele hicho kinakaa kwenye markup ya ukurasa.
Kwa ufupi
Asilimia ina jukumu muhimu katika kuunda mpangilio wa tovuti za msikivu . Ikiwa unatengeneza picha kwa kuzingatia au kutumia upana wa asilimia kufanya gridi ya kweli ya maji ambayo ukubwa ni jamaa kwa kila mmoja, kuelewa mahesabu haya itakuwa muhimu ili kufikia kuangalia unayotaka.