Kọ bi awọn aṣàwákiri wẹẹbù ṣe idajọ ifihan kan nipa lilo awọn iye ogorun
Ọpọlọpọ awọn akẹkọ ti nṣe idahun oniru wẹẹbu ni akoko ti o nira fun lilo awọn ipin-iṣiro fun awọn iwọn iwọn. Ni pato, iṣuṣamu wa pẹlu bi aṣawari ṣe n ṣe ipinnu awọn ipin-iṣiro naa. Ni isalẹ iwọ yoo wa alaye ti o ṣe alaye bi o ṣe jẹ pe awọn oṣuṣi ọgọrun ṣiṣẹ fun awọn iṣiro iwọn ni aaye ayelujara idahun.
Lilo awọn Pixels fun Awọn Ẹrọ Nla
Nigbati o ba lo awọn piksẹli bi iye iwọn, awọn esi naa ni o rọrun gan-an. Ti o ba lo CSS lati ṣeto iwọn ijinlẹ ti ẹya kan ninu akọsori ti iwe kan si 100 awọn piksẹli jakejado, irọ naa yoo jẹ iwọn kanna bi ọkan ti o ṣeto si 100 awọn piksẹli fife ni akoonu aaye ayelujara tabi ẹsẹ tabi awọn agbegbe miiran ti oju iwe. Awọn piksẹli jẹ iye idiwọn, bẹ 100 awọn piksẹli jẹ 100 awọn piksẹli lai ṣe ibiti o wa ninu iwe rẹ ohun oran kan han. Laanu, lakoko ti awọn ẹbun ẹbun jẹ rọrun lati ni oye, wọn ko ṣiṣẹ daradara ni aaye ayelujara ti n dahun.
Ethan Marcotte ti sọ ọrọ naa "ti o ni ojuṣe aaye ayelujara", ti o salaye ọna yii gẹgẹbi o ni awọn bọtini pataki mẹta:
- Agi irọrun
- Media media
- Iwadii Media
Awọn ojuami akọkọ akọkọ, iṣakoso omi ati awọn media media, ti wa ni ṣiṣe nipasẹ lilo awọn ipin ogorun, dipo ti awọn piksẹli, fun awọn iwọn iye.
Lilo awọn Ogorun fun Awọn Iwọn Ipo
Nigbati o ba lo awọn ipin-ọna lati ṣeto iwọn kan fun ipinnu kan, iwọn gangan ti awọn aṣoju ti o han ni yoo yato yatọ si ibi ti o wa ninu iwe naa. Ogorun ni iye iyasọtọ, ti o tumọ si iwọn ti o han jẹ ibatan si awọn eroja miiran ninu iwe rẹ.
Fun apeere, ti o ba ṣeto iwọn ti aworan kan si 50%, eyi ko tumọ si pe aworan yoo han ni idaji iwọn rẹ deede. Eyi jẹ ẹtan ti o wọpọ.
Ti aworan kan ba jẹ deede 600 awọn piksẹli jakejado, lẹhinna lilo nọmba CSS lati fi han ni 50% ko tumọ si pe yio jẹ 300 awọn piksẹli jakejado ninu aṣàwákiri wẹẹbù. Iye iṣiye iye yi jẹ iṣiro da lori ero ti o ni aworan naa, kii ṣe iwọn awọn ọmọde ti aworan naa rara. Ti apoti naa (eyi ti o le jẹ pipin tabi diẹ ninu awọn HTML miiran) jẹ 1000 pixels jakejado, lẹhinna aworan naa yoo han ni awọn piksẹli 500 lati pe iye ti o jẹ 50% ti igbọnwọ apo. Ti o ba ni ifilelẹ ti o wa ni 400 awọn piksẹli jakejado, lẹhinna aworan yoo han nikan ni awọn piksẹli 200, niwon iye naa jẹ 50% ti apo eiyan naa. Aworan ti o ni ibeere nibi ni iwọn 50% eyiti o da lori gbogbo nkan ti o wa ninu rẹ.
Ranti, apẹẹrẹ idahun jẹ omi. Awọn ipilẹ ati titobi yoo yipada bi iwọn iboju / awọn ayipada ẹrọ . Ti o ba ro nipa eyi ni awọn ti ara, awọn aaye ayelujara ti kii ṣe aaye, o dabi pe nini apoti paali ti o n ṣatunkọ pẹlu awọn ohun elo iṣakojọpọ. Ti o ba sọ pe apoti gbọdọ jẹ idaji ti o kún pẹlu ohun elo naa, iye ti iṣakojọpọ ti o nilo yoo yato si iwọn iwọn apoti naa. Bakannaa o jẹ otitọ fun awọn iwọn oju-iwọn ninu apẹrẹ ayelujara.
Awọn ogorun ọgọrun ti a da lori Awọn ogorun ogorun miiran
Ni apẹẹrẹ aworan / apẹẹrẹ, Mo lo awọn ẹbun pixel fun awọn ohun ti o ni apakan lati fi han bi aworan ti n dahun yoo han. Ni otito, awọn ti o ni ipinnu yoo tun ṣeto si ogorun kan ati aworan, tabi awọn ero miiran, inu apo ti yoo gba awọn iṣiro wọn da lori ogorun ogorun ogorun.
Eyi ni apẹẹrẹ miiran ti o fihan eyi ni iṣe.
Sọ pe o ni aaye ayelujara nibiti gbogbo aaye wa wa laarin pipin pẹlu ẹgbẹ kan ti "egba" (iṣẹ oniruwe wẹẹbu kan ti o wọpọ). Ninu iyọn naa ni awọn ipin miiran mẹta ti o yoo ṣe-ara-ara lati han bi awọn ọwọn 3 atẹmọ. HTML yii le dabi eyi:
Nisisiyi, o le lo CSS lati ṣeto iwọn ti "ipin" ti "ipin" lati sọ 90%. Ni apẹẹrẹ yii, ipin ẹja ko ni ohun miiran ti o yika rẹ yatọ si ara, eyiti a ko ṣeto si eyikeyi pato iye. Nipa aiyipada, ara yoo ṣe bi 100% ti window window. Nitorina, igbiye ipin "ekun" naa yoo da lori iwọn ti window window. Bi window aṣàwákiri náà ṣe yipada ni iwọn, bẹ naa ni iwọn "egungun" yii. Nitorina ti window window ba wa ni iwọn 2000 awọn fọọmu, yi pipin yoo han ni awọn 1800 awọn piksẹli. Eyi ṣe iṣiro bi 90-ogorun ti 2000 (2000 x .90 = 1800)), ti o jẹ iwọn ti aṣàwákiri.
Ti o ba jẹ pe ipinkan "col" ti o wa ninu "apo" naa ni iwọn 30%, nigbana ni ọkọọkan wọn yoo jẹ 540 awọn piksẹli jakejado ni apẹẹrẹ yii. Eyi ṣe iṣiro bi 30% ti awọn 1800 awọn piksẹli ti eiyan naa tun ṣe ni (1800 x .30 = 540). Ti a ba yi ipin ogorun ti eiyan naa pada, awọn ipin inu wọnyi yoo tun yipada ni iwọn ti wọn ṣe ni niwon wọn gbẹkẹle nkan ti o wa.
Jẹ ki a ro pe awọn fọọmu lilọ kiri wa ni 2000 awọn piksẹli bakanna, ṣugbọn a yi iwọn iye ti apo eiyan pada si 80% dipo 90%. Eyi tumọ si pe yoo san ni awọn 1600 awọn piksẹli ni bayi (2000 x .80 = 1600). Paapa ti a ko ba yi CSS pada fun iwọn ti awọn ẹgbẹ mẹta "col" wa, ti o si fi wọn silẹ ni 30%, wọn yoo ṣe oriṣiriṣi bayi lẹhin ti wọn ti ni ano, eyi ti o jẹ ipo ti wọn ti pọ nipasẹ, ti yipada. Awọn ipinnu mẹta yii yoo ṣe bi awọn 480 awọn piksẹli ni kikun kọọkan, eyiti o jẹ 30% ti 1600, tabi iwọn ti eiyan (1600 x .30 = 480).
Ti mu eyi paapaa siwaju sii, ti o ba jẹ aworan kan ninu ọkan ninu awọn ipin "col" wọnyi ati pe aworan naa tobi nipasẹ lilo ọgọrun kan, ohun ti o wa fun sisọ rẹ yoo jẹ "col" ara rẹ. Bi pipin "col" ti yi pada ni iwọn, bẹ yoo jẹ aworan inu rẹ. Nitorina ti iwọn ti aṣàwákiri tabi "ekun" naa yipada, eyi yoo ni ipa awọn ipin "col" mẹta, eyi ti yoo yipada ni iwọn ti aworan inu "col." Bi o ti le ri, gbogbo wọn ni a ti sopọ nigbati o wa si awọn iwọn iye ti o ṣe iwọn-iwọn.
Nigba ti o ba wo bi ohun ti o wa ninu oju-iwe ayelujara kan yoo ṣe nigba ti a ba lo iye ogorun kan fun iwọn rẹ, o nilo lati ni oye ibi ti eyi ti o wa ninu oju-iwe ti oju-iwe naa.
Ni soki
Awọn ogorun ọgọrun ni ipa ipa pataki ni sisẹda ifilelẹ fun awọn aaye ayelujara idahun . Boya o jẹ awọn aworan ti o pọju tabi ni lilo awọn iwọn ọgọrun lati ṣe grid ojulowo gidi ti awọn titobi rẹ jẹ ibatan si ara wọn, agbọye awọn iṣiro wọnyi yoo jẹ pataki lati ṣe iyọrisi oju ti o fẹ.