Ionnsaich mar a tha brabhsairean-lìn a 'socrachadh taisbeanadh a' cleachdadh luachan cuibhreannach
Tha ùine dhoirbh aig mòran de dh'oileanaich de dhealbhadh lìn fhreagarrach a 'cleachdadh ceudadan airson luachan leud. Gu sònraichte, tha iomagain ann air mar a bhios am brabhsair a 'tomhas na ceudadan sin. Gu h-ìosal gheibh thu mìneachadh mionaideach air mar a tha ceudadan ag obrachadh airson àireamhachadh leud ann an làrach-lìn fhreagarrach.
Cleachdadh Pixels airson Luachan Leudaichte
Nuair a chleachdas tu piogsail mar luach leud, tha na toraidhean gu math sìmplidh. Ma chleachdas tu CSS gus luach leud aonamaid a chur ann an ceann a 'phàipeir gu 100 picteal de leud, bidh an aon mheud sin mar aon a chuir thu gu 100 picsean a leud ann an susbaint an làrach-lìn no air bonn-coise na làraich no raointean eile den duilleag. Tha picsean fìor luachmhor, agus mar sin tha 100 piogsail 100 piogsa, ge bith càite anns an sgrìobhainn agad a tha coltas ann. Gu mì-fhortanach, ged a tha luachan psaicean furasta an tuigsinn, chan eil iad ag obair gu math ann an làraichean-lìn freagrach.
Choisinn Ethan Marcotte am facal "dealbhadh lìn fhreagarrach", a 'mìneachadh an dòigh-obrach seo anns a bheil 3 prìomh phrionnsapalan:
- Grid leudaichte
- Meadhanan fluid
- Ceistean mu na meadhanan
Thathas a 'coileanadh an dà phuing a tha a' chiad dà phuing seo, grid leotha agus meadhanan sreap, le bhith a 'cleachdadh ceudadan, an àite pixel, airson luachan sèididh.
A 'cleachdadh ceudadan airson luachan leathann
Nuair a chleachdas tu ceudadan airson leud a stèidheachadh airson eileamaid, bidh am fìor mheud a thaisbeanaidhean eileamaid ag atharrachadh a rèir far a bheil e san sgrìobhainn. Tha na ceudadan luach luachmhor, a 'ciallachadh gu bheil am meud a tha air a thaisbeanadh co-cheangailte ri eileamaidean eile sa phàipear agad.
Mar eisimpleir, ma shuidhicheas tu leud ìomhaigh gu 50%, chan eil seo a ' ciallachadh gun nochd an dealbh aig leth de a mheud àbhaisteach. Is e mì-thuigse cumanta a tha seo.
Ma tha ìomhaigh de 600 pixel ann an leud, agus an uairsin a 'cleachdadh luach CSS airson a thaisbeanadh aig 50% chan eil e a' ciallachadh gum bi e 300 pixel ann an leud anns a 'bhrabhsair lìn. Tha an luach ceudad seo air a thomhas a rèir an eileamaid anns a bheil an ìomhaigh sin, chan e meud dùthchasach na h-ìomhaigh fhèin. Mas e am pasgan (a dh'fhaodadh a bhith na roinn no eileamaid HTML eile) 1000 picteall de leud, nochdaidh an dealbh aig 500 piogsail oir is e an luach sin 50% de leud an t-soithich. Ma tha an eileamaid anns a bheil 400 picsleatair de leud, cha nochd an dealbh ach aig 200 piogsail, seach gu bheil an luach sin 50% den ghobhar. Tha meud 50% san ìomhaigh anns a bheil ceist an seo, a tha an crochadh gu tur air an eileamaid anns a bheil e.
Cuimhnich, tha dealbhadh freagrach fluid. Nì pàipearan agus meudan atharrachadh nuair a bhios meud / inneal an sgrion ag atharrachadh . Ma tha thu a 'smaoineachadh mu dheidhinn seo ann an teirmean corporra, neo-lìn, tha e coltach ri bhith a' toirt bogsa cairt-bòrd air a bheil thu a 'lìonadh le stuth pacaidh. Ma tha thu ag ràdh gum bu chòir am bogsa a bhith air a lìonadh leis an stuth sin, bidh an ìre de phacaid a dh 'fheumas tu ag atharrachadh a rèir meud a' bhogsa. Tha an aon rud fìor airson leud sa cheud ann an dealbhadh lìn.
Ceudadan stèidhichte air ceudadan eile
Anns an eisimpleir ìomhaigh / soitheach, chleachd mi luachan psaicean airson an eileamaid a th 'ann airson sealltainn mar a bhiodh an dealbh fhreagarrach a' taisbeanadh. Ann am fìrinn, bhiodh an eileamaid a bh 'ann cuideachd air a shuidheachadh gu ìre sa cheud agus gheibheadh an ìomhaigh, no eileamaidean eile, taobh a-staigh an t-soitheach sin na luachan aca stèidhichte air ceudad de cheudad.
Seo eisimpleir eile a tha a 'sealltainn seo ann an cleachdadh.
Abair gu bheil làrach-lìn agad far a bheil an làrach gu lèir ann an roinn le clas "container" (cleachdaidhean dealbhaidh lìn coitcheann). Taobh a-staigh na roinne sin tha trì roinnean eile a nì thu stoidhle gus an taisbeanadh mar 3 colbhan dìreach. Is dòcha gum bi HTML mar sin:
A-nis, is urrainn dhut CSS a chleachdadh gus meud an roinn "soitheach" sin a shuidheachadh airson 90% a ràdh. Anns an eisimpleir seo, chan eil eileamaid eile anns an roinn soithich a tha a 'cuairteachadh ris a' bhodhaig seach an corp, nach do chuir sinn ri luach sònraichte sam bith. Gu bunaiteach, bheir an corp mar 100% de uinneag a 'bhrabhsair. Mar sin, bidh an àireamh sa cheud "container" stèidhichte air meud uinneag a 'bhrabhsair. Mar a bhios uinneag a 'bhrabhsair sin ag atharrachadh ann am meud, mar sin bidh meud an "soithich" seo. Mar sin ma tha uinneag a 'bhrabhsair 2000 pixels ann, nochdaidh an roinn seo aig 1800 pixel. Tha seo air a thomhas mar 90 sa cheud de 2000 (2000 x .90 = 1800)), is e meud a 'bhrabhsair.
Ma tha gach roinn de na "roinnean" a gheibhear taobh a-staigh na "uinneig" suidhichte gu meud de 30%, bidh gach aon dhiubh 540 picteall de leud san eisimpleir seo. Tha seo air a thomhas mar 30% de na 1800 piogsail a bhios an cois a 'dèanamh aig (1800 x .30 = 540). Ma dh'atharraich sinn ceudad an t-soithich sin, bhiodh na roinnean a-staigh cuideachd ag atharrachadh anns a 'mheud a tha iad a' toirt seachad oir tha iad an urra ris an eileamaid sin.
Feuch gun toir sinn a-mach gu bheil uinneagan a 'bhrabhsair fhathast aig 2000 pixel air fad, ach bidh sinn a' atharrachadh luach ceudad an t-soithich gu 80% an àite 90%. Tha sin a 'ciallachadh gun toir e seachad aig 1600 picsleatair an leud a-nis (2000 x .80 = 1600). Fiù mura h-atharraich sinn an CSS airson meud nan roinnean 3 "col" againn, agus fàg sinn iad aig 30%, bidh iad a 'dèanamh eadar-dhealachadh eadar-dhealaichte a-nis bhon a tha an eileamaid a tha ann, a tha an co-theacsa a tha iad air a mheudachadh le, air atharrachadh. Bidh na trì roinnean sin a-nis a 'dèanamh mar 480 pixel ann an leud gach aon, a tha 30% de 1600, no meud an t-soithich (1600 x .30 = 480).
A 'gabhail seo nas fhaide air adhart, nam biodh ìomhaigh taobh a-staigh aon de na roinnean "col" sin agus gun robh an ìomhaigh sin a' cleachdadh ìre sa cheud, b 'e an "col" fhèin an co-theacs airson a sizing. Mar a dh'atharraich roinn "col" ann am meud, mar sin bhiodh an ìomhaigh a-staigh e. Mar sin, ma dh'atharraich meud an t-sealladair no an "inneal", bhiodh sin a 'toirt buaidh air na trì roinnean "col", rud a dh' atharraicheas meud an ìomhaigh taobh a-staigh an "col." Mar a chì thu, tha iad sin uile ceangailte tha e a 'tighinn gu luachan sèididh air a stiùireadh le ceudad.
Nuair a smaoinicheas tu mar a bheir taobh a-staigh duilleag lìn seachad nuair a thèid luach cuibhreannach a chleachdadh airson a leud, feumaidh tu an co-theacsa anns a bheil an eileamaid sin a 'fuireach ann an comharradh na duilleige.
Ann an Geàrr-chunntas
Tha pàirt chudromach aig ceudadan ann a bhith a 'cruthachadh cruth airson làraich-lìn fhreagarrach . Ge bith co-dhiù a tha thu a 'sgoltadh ìomhaighean gu cùramach no a' cleachdadh leud an ceudad gus grid fìor fhileanta a dhèanamh, a bheil meudan co-cheangailte ri chèile, bidh feum air an àireamhachadh sin gus an sealladh a tha thu ag iarraidh a choileanadh.