Ahoana ny fomba hahatonga ny tranonkala ho mamaly?

Miaraka amin'ny demokrasia amin'ny finday sy takelaka, fanaovana tranokala manaiky lasa tena ilaina. Ny tranokala mandray andraikitra dia afaka mampifanaraka ho azy amin'ny fitaovana fitetezana samihafa - desktop, finday, tablette - mba hanomezana traikefa mpampiasa tsara indrindra. Tsara ihany koa ny tranonkala mandray andraikitra fanondroana tranonkala.

Araka ny filazan'i Google, maherin'ny 60% amin'ny fikarohana no izao natao tamin'ny finday. Noho izany dia ilaina ny manatsara ny tranokalanao ho an'ireo fitaovana ireo, raha tsy izany dia hihena ny fifamoivoizanao. Na izany aza, maro amin'ireo tranonkala no mbola tsy namboarina araka ny tokony ho izy.

Amin'izao fotoana izao, ny famolavolana ny antsoina hoe "websites"manaiky” (na azo ampifanarahana) dia nanjary tena ilaina. Inona marina anefa no dikan’izany? Ahoana no ahafahanao manamboatra tranokala ho an'ny habe rehetra?

Ny famolavolana mamaly dia ny famoronana vohikala afaka mampifanaraka ho azy eo amin'ny lafin-drafitra sy ny refy mba hanomezana traikefa mpampiasa tsara indrindra amin'ny fitaovana rehetra: desktop 🖥️, takelaka 💻, finday 📱.

Ireto ny fomba fanao tsara indrindra apetraka mba hamoronana tranonkala mamaly tsara:

🚀 Mampiasà singa mifandraika (%, em, rem) fa tsy pixel ao amin'ny CSS

Mba ahafahana mampifanaraka tanteraka ny singa, dia soso-kevitra ny hampiasa ireo singa mifandraika amin'ny fandrefesana toy ny %, em na rem fa tsy pixel raikitra ao amin'ny fitsipika CSS-nao. Ny isan-jato dia mamela ny fanovana habe mandeha ho azy arakaraka ny haben'ny efijery.

Iray amin'ireo fomba fanao mahazatra indrindra ho an'ny ny famoronana tranonkala mandray andraikitra dia ny misoroka hampiasa pixel raikitra amin'ny fitsipika CSS-nao. Raha ny marina, ny pixel dia tsy mamela ny haben'ny singa mba hifanaraka amin'ny fitaovana.

Izany no nanolorana azy ho hankafy ny antsoina hoe vondrona vondrona toy ny isan-jato (%), em na rem an-toerana. Ny % manokana dia mamela ny fanovana automatique amin'ny boaty, lahatsoratra, sisiny, sns. arakaraka ny haben'ny efijery.

Ohatra, ny sakany napetraka amin'ny 50% amin'ny CSS dia hiantoka fa ny singa dia handray foana ny 50% amin'ny sakany misy, na amin'ny PC, tablette na smartphone screen. Ity fomba fiasa mivaingana ity dia mety tsara amin'ny famoronana rindran-damina malefaka izay mampifanaraka tsara.

🚀 Farito ny fanontanian'ny media ao amin'ny stylesheet CSS

Ny fangatahana media CSS dia torolalana ilaina ho an'ny mamorona tranonkala mandray andraikitra. Izy ireo dia mamela anao hamaritra fitsipika CSS manokana izay mihatra amin'ny sakan'ny varavarankely fampisehoana (viewport).

Azonao atao ny mamaritra mora foana ny layout, endritsoratra, sisiny, sns. samy hafa miankina amin'ny hoe amin'ny solosaina desktop, tablette na smartphone ny mpampiasa. Ohatra, azontsika faritana izany amin'ny ambany 768px ny sakany, fiovana amin'ny menu hamburger ny navigation.

Ny fangatahan'ny haino aman-jery dia ahafahanao mampifanaraka tsara ny fandikana sy ny fandaminana ireo singa arakaraka ny haben'ny efijery. Atambatra amin'ny singa CSS flexible, tena ilaina izy ireo mamorona tranokala tonga lafatra mamaly ary manome traikefa mpampiasa tsara indrindra.

🚀 Ataovy mamaly ny sary

Ny sary dia tsy maintsy koa ampifanarahana mba hisorohana azy ireo tsy hihenjana tsy mifandanja amin'ny fitaovana sasany. Tsy maintsy noho izany amboary ny sarinao ho an'ny SEO. Ny fanao tsara indrindra dia ny mametraka ny sakany ho isan-jato amin'ny code HTML na amin'ny CSS.

Azontsika ampiasaina koa ny fananana CSS "sakany ambony indrindra: 100%" mba hifanaraka amin'ny fitoerany ny sary sady mitazona ny tanjany. Amporisihina ihany koa ny mamaritra dikan-teny maromaro amin'ny sary mitovy amin'ny fanapahan-kevitra samihafa ary hanondro amin'ny navigateur izay dikan-teny ampiasaina arakaraka ny haben'ny efijery amin'ny alàlan'ny " attributesrcset".

Raha mamaly, ny sary dia tokony havadika ho azy fa tsy mivelatra, mba hiantohana ny kalitao tsara indrindra amin'ny fitaovana rehetra.

🚀 Mampiasà rafitra CSS mandray andraikitra

Ny fampiasana framework CSS mamaly dia iray amin'ireo fomba fanao tsara indrindra amin'ny fanaovana tranokala mamaly. Ny rafitra CSS toa an'i Bootstrap, Foundation, Bulma, ary Materialize dia manolotra rindran-drafitra efa voafaritra mialoha sy singa mandray andraikitra izay manamora ny famoronana tranonkala mandray andraikitra.

Ireo rafitra ireo dia manome kilasy CSS vonona hampiasaina izay ahafahanao mamorona lamina Pejy mora azo sy mamaly. Mampiasa teknika toy ny fangatahan'ny haino aman-jery izy ireo mba hanitsiana ho azy ny lamina sy ny fomba mifototra amin'ny haben'ny efijery amin'ny fitaovana ampiasaina hijerena ilay tranokala.

Amin'ny fampiasana rafitra CSS mamaly, afaka manangana rafitra fototra ho an'ny tranokalanao ianao izay mifanaraka tsara amin'ny fitaovana sy habe samihafa. Azonao atao ny mandamina mora foana ny singan'ny tranokalanao amin'ny alàlan'ny grids omen'ny framework, izay mamela ny fametrahana tsy miovaova amin'ny fitaovana rehetra.

🚀 Fandikana andrana amin'ny fitaovana rehetra

Tena ilaina ny manandrana ny fampisehoana ny tranokalanao amin'ny solosaina, takelaka ary finday mba hahazoana antoka fa mifanaraka tsara amin'ny sakan'ny efijery tsirairay izany.

Ny ankamaroan'ny navigateur maoderina, toy ny Google Chrome sy Mozilla Firefox, manolotra fitaovana fampandrosoana mitambatra. Ireo fitaovana ireo dia ahafahanao maka tahaka ny fitaovana sy ny haben'ny efijery mba hijerena ny fandikana ny tranokala. Azonao atao ny miditra amin'ireo fitaovana ireo amin'ny fipihana havanana amin'ny pejy ary avy eo misafidy "Jereo”Na“Jereo ny singa".

Misy serivisy an-tserasera maimaim-poana toy ny BrowserStack sy CrossBrowserTesting izay ahafahanao mitsapa ny famoahana tranonkala amin'ny fitaovana sy navigateur isan-karazany. Ireo serivisy ireo dia ahafahanao mijery ny tranokalanao amin'ny fitaovana virtoaly na ara-batana samihafa, manome anao hevitra mazava momba ny fomba fijerin'ny fitaovana tsirairay.

Ny fitaovana emulators sy ny simulators dia rindrambaiko izay mamerina ny toetra sy ny fitondran-tenan'ny fitaovana tena izy. Ohatra, mba hitsapana amin'ny iOS, azonao atao ny mampiasa ny Xcode emulator ho an'ny fitaovana Apple.

Ho an'ny Android dia misy emulator Android Studio. Ireo fitaovana ireo dia ahafahanao mitsapa ny tranokalanao amin'ny fitaovana virtoaly miaraka amin'ny famahana efijery samihafa.

🚀 Fadio ny singa habe raikitra

Mba hahatonga ny tranokala ho mamaly dia ilaina ny misoroka ireo singa raikitra. Ireto misy toro-hevitra vitsivitsy hanatrarana izany:

Mampiasà singa fandrefesana miovaova: Raha tokony hampiasa piksela (px) hamaritana ny haben'ny singa, fa ampiasao kosa ny singam-pandrefesana mora miovaova toy ny isan-jato (%) na ny singam-pijery (vh, vw). Izany dia ahafahan'ny singa mandanja mifanaraka amin'ny haben'ny efijery.

Mampiasà racks flexible: Ny grids flexible, toy ireo omen'ny frameworks CSS responsive, dia mamela anao hamorona rindrankajy adaptive amin'ny fampiasana tsanganana sy andalana moramora. Izany dia ahafahan'ny singa mandamina ho azy araka ny haben'ny efijery, manome traikefa mpampiasa tsy miovaova amin'ny fitaovana.

Fadio ny sakan'ny sary ho an'ny sary: Raha tokony hamaritra ny sakany raikitra ho an'ny sary, ampiasao ny fananana CSS "max-width: 100%;" mba hamela ny sary hanova ny haben'ny mitovy amin'ny haben'ny fitoerany. Izany dia miantoka fa ny sary dia mifanaraka tsara amin'ny fitaovana isan-karazany tsy mihozongozona na manodina.

Ampiasao ny Fanontaniana amin'ny haino aman-jery: Ny fangatahan'ny media dia fitsipika CSS mamela anao hampihatra fomba isan-karazany arakaraka ny haben'ny efijery. Ampiasao izy ireo hanitsiana ny endriky ny singa ho an'ny famahana efijery samihafa mba hanamafisana ny fijerena amin'ny fitaovana tsirairay.

🚀 Manatsotra ny fitetezana finday

Mba hanatsorana ny fitetezana finday sy hanomezana traikefan'ny mpampiasa tsara kokoa, ireto misy toro-hevitra tokony harahina:

Mampiasà sakafo fitetezana finday: Soloy amin'ny sakafo fitetezana finday, toy ny sakafo hamburger, ny sakafo fitetezana mahazatra. Ity karazana menu ity dia manampy amin'ny fampihenana ny fikorontanan'ny efijery ary mahatonga ny fitetezana ho mora kokoa ho an'ny mpampiasa finday.

Fehezo ny isan'ny singa fitetezana: Ahena ny isan'ny zavatra fitetezana aseho ao amin'ny sakafo finday. Fantaro ireo singa manan-danja indrindra ary mifantoha amin'izy ireo mba ho mora kokoa ny fandehanana. Azonao atao ihany koa ny manambatra zavatra mitovy amin'ny sokajy mba hisorohana ny sakafo lava.

Mampiasà fitetezana ambaratonga tokana : Halaviro ny sakafo midina midina misy ambaratonga maromaro amin'ny fitaovana finday. Fa kosa, mifidiana ny fitetezana ambaratonga tokana, izay ahafahan'ny mpampiasa mivezivezy mivantana any amin'ireo fizarana lehibe amin'ny tranokala tsy mila mivezivezy amin'ny ambaratonga maro.

Mampiasà bokotra hetsika mazava: Mampiasà bokotra hetsika mazava sy mora kitihina hitarihana ny mpampiasa amin'ny hetsika manokana, toy ny fampidirana vokatra ao anaty sarety na fandefasana taratasy. Ataovy azo antoka fa lehibe ny bokotra mba ho voatendry mora amin'ny rantsan-tànanao.

Mampiasà kisary intuitive: Mampiasà kisary azo fantarina hanehoana hetsika na sokajy ao amin'ny menio fitetezana finday. Ny kisary voalamina tsara dia afaka manampy ny mpampiasa hahatakatra haingana ny dikan'ny singa fitetezana tsy mila mamaky etikety lava.

🚀 Famaranana

Ny famolavolana ny Lasa tsy maintsy ilaina ny tranokala mandray andraikitra mba hanomezana traikefa mpampiasa kalitao amin'ny fitaovana rehetra.

Amin'ny alàlan'ny fanarahana ireo fanao tsara indrindra toy ny fampiasana singa CSS flexible, ny fametrahana fanontaniana amin'ny haino aman-jery na ny fanatsarana sary, ny tranonkala rehetra dia azo amboarina tsara.

Noho ireo fitsipika tsotra vitsivitsy ireo dia hiantoka ny fampisehoana tsara indrindra amin'ny tranokalanao amin'ny solosaina desktop, takelaka ary finday ianao. Tsy misy zoom in sy out intsony ho an'ny navigation mahazo aina!

Mba handeha lavitra kokoa dia manoro hevitra aho ny hampiasa ny plugin WP Rocket mahery amin'ny WordPress. Izany dia ahafahanao manatsara araka izay tratra ny hafainganam-pandehan'ny tranokalanao mamaly. Ny tranonkala izay sady adaptive no tena haingana dia ny fanalahidin'ny user experience tsy misy kilema!

FAQ

F: Inona no atao hoe famolavolana responsive?

A: Ny manaiky Design dia fomba fandrafetana tranonkala mikendry ny hanao vohikala adaptive sy miasa amin'ny fitaovana rehetra sy ny haben'ny efijery. Izy io dia mamela ny atiny sy ny fisehon'ny fanovana ho azy mba hanomezana traikefa mpampiasa tsara indrindra, na amin'ny desktop, tablette na smartphone.

F: Nahoana no zava-dehibe ny manao vohikala mamaly?

A: Tena ilaina ny fanaovana tranonkala mamaly mba hanomezana traikefa mpampiasa tsy miovaova sy tsara amin'ny fitaovana rehetra. Miaraka amin'ny fitomboan'ny fampiasana fitaovana finday, dia zava-dehibe ny fampifanarahana ny tranokalanao hifanaraka amin'ny andrasan'ny mpampiasa sy hanatsarana ny laharan'ny motera fikarohana.

F: Inona avy ireo fitsipika fototra amin'ny fampivoarana tranonkala mandray andraikitra?

A: Ny fitsipika fototra amin'ny fampivoarana tranonkala mandray andraikitra dia ahitana ny fampiasana grids mora azo, ny fisorohana ny singa mitovitovy habe, ny fampifanarahana ny sary, ny fampiasana ny fangatahan'ny haino aman-jery mba hampiharana ireo endrika samihafa miankina amin'ny haben'ny sary.

F: Inona no atao hoe framework CSS responsive?

A: A Rafitra CSS Ny Responsive dia andiana fomba CSS efa vita sy singa mamaly izay manamora ny famoronana tranokala mandray andraikitra. Ireo rafitra ireo, toy ny Bootstrap, Foundation, ary Bulma, dia manome rindran-drafitra azo esorina, kilasy CSS efa vonona, ary singa mandray andraikitra hanafaingana ny fizotran'ny fampandrosoana.

F: Ahoana no fomba hitsapako ny fomba fandidian'ny tranokala amin'ny fitaovana samihafa?

A: Mba hitsapana ny fomba famadihan'ny tranokala amin'ny fitaovana samihafa, azonao atao ny mampiasa ny fitaovana mpamorona ny navigateur izay ahafahanao maka tahaka ny haben'ny efijery. Azonao atao ihany koa ny mampiasa serivisy an-tserasera, emulator fitaovana na simulator, na fitsapana amin'ny fitaovana tena izy.

F: Inona avy ireo fomba fanao tsara indrindra hanatsorana ny fitetezana finday?

A: Mba hanatsorana ny fitetezana finday, ampiasao ny menio fitetezana finday toy ny menio hamburger, ferana ny isan'ny zavatra fitetezana, ampiasao ny fitetezana ambaratonga tokana, ampiasao bokotra hetsika mazava, amboary ho an'ny fandefasana haingana, ampiasao kisary intuitive ary andramo tsy tapaka ny fitetezana amin'ny sehatra samihafa. fitaovana.

F: Ahoana no ahafahako mamaly ny tranokalako efa misy?

A: Mba hamerenana ny tranokalanao efa misy dia azonao atao ny mampiasa rafitra CSS mamaly mba hanamora ny fametrahana rafitra adaptatera. Ilainao koa ny manova ny kaody CSS efa misy mba hampiasana singam-pandrefesana miovaova, hialana amin'ny singa habe raikitra, ary hampihatra fomba manokana amin'ny haben'ny efijery samihafa amin'ny fampiasana fanontaniana media.