Wani abu da aka tambaye shi a cikin zane-zane na yanar gizo shine "ta yaya za ka saita tsawo na wani kashi zuwa 100%"?
Wannan yana iya zama kamar amsa mai sauki. Kuna amfani da CSS kawai don saita tsawo na wani kashi zuwa 100%, amma wannan ba kullum shimfiɗa wannan kashi don dace da dukkanin browser. Bari mu ga dalilin da ya sa wannan ya faru da abin da za ku iya yi don cimma wannan salon.
Pixels da Kashi
Lokacin da ka ayyana tsawo na wani kashi ta amfani da dukiyar CSS da darajar da ke amfani da pixels, wannan nauyin zai dauki wannan wuri a cikin mai bincike.
Alal misali, sakin layi tare da tsawo: 100px; zai ɗauki 100 pixels na sararin samaniya a cikin zane naka.Idan ba kome ba ne yadda girman mashin bincikenka yake, wannan kashi zai zama 100 pixels a tsawo.
Kashi na kashi suna aiki daban-daban fiye da pixels. Bisa ga ƙayyadaddun W3C, an ƙididdige ma'aunin kashi dangane da tsayin ganga. To, idan kun sanya sakin layi tare da tsawo: 50%; a cikin raba tare da tsawo na 100px, sakin layi zai zama 50 pixels a tsawo, wanda shine 50% na iyayen mahaifa.
Dalilin da ya sa Kashi Hanya Kashi ya Kashe
Idan kuna zayyana shafin yanar gizon, kuma kuna da wata shafi da za ku so ku dauka cikakken tsawo na taga, burin da ya dace shi ne don ƙara tsawo: 100%; zuwa wannan kashi. Hakika, idan ka saita nisa zuwa nisa: 100%; kashi zai karbi cikakken sararin samaniya na shafin, don haka tsawo ya kamata yayi daidai, daidai? Abin baƙin ciki, wannan ba haka bane ba.
Don fahimtar dalilin da ya sa wannan ya faru, dole ne ku fahimci yadda masu bincike suka fassara tsawo da nisa. Masu bincike na yanar gizo ƙididdige jimlar da aka samo a matsayin aiki na yadda aka buɗe maɓallin bincike. Idan ba ka sanya kowane ma'auni a cikin takardunku ba, mai bincike zai sauko da abinda ke ciki don ya cika dukkan faɗin taga (100% nisa ne tsoho).
An ƙidaya darajar haɓaka fiye da nisa. A gaskiya ma, masu bincike ba su kimanta tsayi a kowane lokaci ba sai dai idan abun ciki ya dade da yawa har ya tafi waje na viewport (don haka buƙatar gungura masu buƙata) ko kuma idan mai zanen yanar gizo ya kafa cikakken tsawo ga wani kashi akan shafin. In ba haka ba, mai bincike yana iya bari abun ciki ya gudana a cikin fadin tashar jiragen har sai ya zo ga ƙarshe. Ba'a ƙidayar tsawo ba tukuna.
Matsaloli suna faruwa lokacin da ka saita girman tsawo a kan wani ɓangaren da ke da iyayen iyaye ba tare da ma'auni ba - a wasu kalmomi, abubuwan iyaye suna da tsawo tsoho: auto; . Kuna, a sakamakon haka, tambayar mai bincike don lissafin tsawo daga darajar da ba a bayyana ba. Tun da cewa zai zama daidai da darajar banza, sakamakon haka shine mai bincike baiyi kome ba.
Idan kana so ka saita tsawo a kan shafukan yanar gizon zuwa kashi, dole ne ka saita tsawo na kowane nau'in iyaye na wanda kake son tsawo yayi. A wasu kalmomi, idan kana da shafi kamar haka:
Abun ciki a nan
Kila kuna so raba da sakin layi a ciki don samun kashi 100%, amma sakon yana da abubuwa biyu na iyaye:
da kuma. Domin ƙayyade tsawo daga cikin raba zuwa girman dangi, dole ne ka saita tsawo na jiki da abubuwan html.
Saboda haka kuna buƙatar amfani da CSS don saita tsawo na ba kawai div, amma kuma jiki da html abubuwa. Wannan zai iya zama kalubalanci, tun da za ka iya samun sauri tare da duk abin da aka saita zuwa 100% tsawo, kawai don cimma burin da ake so.
Wasu Abubuwa Da Za Ka Yi Bayanai Aiki Aiki tare da Kasuwanci 100%
Yanzu da ka san yadda za a saita tsawo na abubuwan da ke cikin shafinka zuwa 100%, zai iya zama mai ban sha'awa don fita da kuma yin haka ga dukan shafukanka, amma akwai wasu abubuwa da ya kamata ka kasance sane da:
- Ƙididdiga da padding iya ƙara gungurawa inda ba ka so daya. Ɗaya daga cikin abubuwan mafi ban sha'awa da na samu tare da aiki tare da ƙananan ƙananan (da kuma nisa) shi ne, to, padding da margins a waɗancan abubuwa zasu iya ƙara gungumen gungura a shafi, ko da yake duk abubuwan sun nuna ba tare da buƙatar gungura ba. Wannan saboda saboda tsawo ko nisa daga cikin kashi shine abu na farko da aka lasafta. Sa'an nan kuma an ƙara wajabi da matuka. Don haka idan kana da kashi tare da tsawo na 100% kuma haɓaka na sama da kasa na 10 pixels kowannensu, za'a sami mashaya gungura don karin 20 pixels. Ka tuna, akwatin CSS yana ƙara iyakoki, iyakar, da kuma kuskuren girman girman wani kashi, don haka 100% tare da duk waɗannan batutattun alamun akwatin za su kasance fiye da 100%.
- Idan abun ciki naka ya ɗauka fiye da yadda aka yi tsawo, zai sake rubuta kome bayan shi. A wasu kalmomi, idan kuna da zane tare da shafi wanda yake da 80% a tsawo, kuma abin da yake cikin ciki zai ɗauki kashi 100% na tsawo, wanda karin 20% zai ci gaba da ƙasa da shafi kuma ya karya zane na zane na shafinku. Idan akwai abun ciki a ƙasa da wannan shafi, rubutu zai rubuta kawai a samansa. Sau da yawa ina ganin wannan ya faru ne yayin da mai zanen yanar gizo yayi ƙoƙari ya tilasta hawan shafi kuma ya sa ta aiki daidai don kaddamarwa, amma idan abun ciki a shafi na canzawa a nan gaba, ƙaddarar ɗakunan su duka sun watsar da kwafin shafin. Wannan shi ne gaskiya a gaskiya lokacin da kake ginin yanar gizo masu dacewa wanda fadada da tsawo dole ne su canza tare da girman girman tallace-tallace.
Don gyara wannan, zaka iya saita tsawo na kashi kuma. Idan kun saita shi zuwa madogara, gungurawa za su bayyana idan an buƙata amma bace idan basu. Wannan ya gyara hutu na gani, amma yana ƙara littattafai inda ba za ku so su ba.
Yin amfani da Ƙungiyoyin Fitar
Wata hanyar da za ku iya magance wannan ƙalubale shine don gwaji tare da CSS Viewport Units. Ta amfani da ma'aunin ƙwanƙwici mai auna, za ka iya girman abubuwa don ɗaukar matsayi mai tsawo na viewport, kuma wannan zai canza a matsayin canza canji! Wannan wata hanya ce mai kyau don samun 100% tsawo visuals a shafi amma har yanzu suna da sauƙi don na'urorin daban-daban da girman girman allo.