Momwe mungapangire tsamba lawebusayiti kuti liyankhe?

Ndi demokalase ya mafoni ndi mapiritsi, kupanga tsamba lawebusayiti uthe zakhala zofunikira. Tsamba lomvera limatha kusinthira ku zida zosiyanasiyana zosakatula - kompyuta, foni, piritsi - kupereka mwayi wogwiritsa ntchito bwino. Webusaiti yoyankha ndiyabwinonso kufotokozera pa intaneti.

Malinga ndi Google, zosaka zopitilira 60% zili pano kuchitidwa kuchokera pa foni yam'manja. Chifukwa chake ndikofunikira kukhathamiritsa tsamba lanu pazida izi, apo ayi magalimoto anu adzatsika. Komabe mawebusayiti ambiri sanapangidwe mokhazikika.

Masiku ano, mapangidwe omwe amatchedwa "mawebusayiti"uthe” (kapena kusinthika) kwakhala kofunikira. Koma kodi zimenezi zikutanthauza chiyani kwenikweni? Kodi mumatani kuti tsamba lawebusayiti likhale lokonzedwa bwino kuti liziwoneka bwino pazithunzi zonse?

Mapangidwe omvera amakhala ndi kupanga tsamba lomwe limatha kusinthika motengera masanjidwe ndi makulidwe ake kuti lipereke mawonekedwe oyenera ogwiritsa ntchito pazida zonse: makompyuta 🖥️, mapiritsi 💻, mafoni a m'manja 📱.

Nawa njira zabwino kwambiri zomwe mungakhazikitsire kuti mupange tsamba lomvera bwino:

🚀 Gwiritsani ntchito mayunitsi achibale (%, em, rem) osati ma pixel mu CSS

Kuti mulole kusinthika kwathunthu kwa zinthu, tikulimbikitsidwa kugwiritsa ntchito miyeso yofananira monga %, em kapena rem m'malo mwa ma pixel osakhazikika mu malamulo anu a CSS. Maperesenti amalola kuti musinthe kukula kwake kutengera kukula kwa skrini.

Chimodzi mwazabwino kwambiri zochitira kupanga malo omvera ndikupewa kugwiritsa ntchito ma pixel okhazikika mu malamulo anu a CSS. Zowonadi, ma pixel salola kuti kukula kwa zinthu kusinthidwa malinga ndi chipangizocho.

Ndi bwino kuti mokomera otchedwa wachibale mayunitsi ngati maperesenti (%), em kapena rem m'malo. % makamaka imalola kuti mabokosi azisintha zokha, zolemba, malire, ndi zina. kutengera chophimba kukula.

Mwachitsanzo, m'lifupi anapereka 50% mu CSS idzaonetsetsa kuti chinthucho nthawi zonse chimatenga 50% ya m'lifupi mwake, kaya pa PC, piritsi kapena foni yamakono. Njira yamadzimadzi iyi ndi yabwino popanga masanjidwe osinthika omwe amagwirizana bwino.

🚀 Tanthauzirani mafunso atolankhani papepala la CSS

Mafunso a CSS media ndi malangizo ofunikira pangani tsamba lomvera. Amakulolani kuti mufotokoze malamulo enieni a CSS omwe angagwire ntchito malinga ndi kukula kwa zenera lowonetsera (viewport).

Mutha kutchula masanjidwe, mafonti, mitsinje, ndi zina. zosiyana kutengera ngati wogwiritsa ntchito ali pakompyuta, piritsi kapena foni yamakono. Mwachitsanzo, tikhoza kufotokoza izo mu pansi pa 768px mulifupi, kusintha kwa navigation ku menyu ya hamburger.

Mafunso azama media amakupatsani mwayi wosinthira bwino mafotokozedwe ndi makonzedwe a zinthu kutengera kukula kwa skrini. Kuphatikizidwa ndi mayunitsi osinthika a CSS, ndikofunikira pangani tsamba langwiro kumvera ndikupereka chidziwitso chabwino kwambiri cha ogwiritsa ntchito.

🚀 Pangani zithunzi kukhala zomvera

Zithunzi ziyeneranso kusinthidwa kuti asatambasule mopanda malire pazida zina. Choncho ayenera konzani zithunzi zanu za SEO. Njira yosavuta ndiyo kuyika m'lifupi mwake ngati peresenti mu code ya HTML kapena kudzera pa CSS.

Titha kugwiritsanso ntchito katundu wa CSS "m'lifupi mwake: 100%" kotero kuti chithunzicho chizolowera ku chidebe chake ndikusunga milingo yake. Ndikulimbikitsidwanso kutanthauzira mitundu ingapo ya chithunzi chimodzi pazosankha zosiyanasiyana ndikuwonetsa kwa osatsegula kuti ndi mtundu uti womwe uyenera kugwiritsidwa ntchito kutengera kukula kwa zenera kudzera pa " mawonekedwe.chantho".

Poyankha, zithunzi zikuyenera kusintha kukula m'malo motambasuka, kuti zitsimikizire kuti zida zonse zili bwino kwambiri.

🚀 Gwiritsani ntchito chimango cha CSS chomvera

Kugwiritsa ntchito dongosolo la CSS lomvera ndi imodzi mwazochita zabwino kwambiri zopangira tsamba lawebusayiti. Zomangamanga za CSS monga Bootstrap, Maziko, Bulma, ndi Materialize zimapereka ma gridi omwe afotokozedweratu ndi zigawo zomvera zomwe zimapangitsa kukhala kosavuta kupanga tsamba lomvera.

Mapangidwe awa amapereka makalasi okonzeka kugwiritsa ntchito CSS omwe amakulolani kupanga masanjidwe tsamba losinthika komanso lomvera. Amagwiritsa ntchito njira monga mafunso atolankhani kuti asinthe mawonekedwe ndi masitayilo potengera kukula kwa chinsalu chomwe chimagwiritsidwa ntchito powonera tsambalo.

Pogwiritsa ntchito chimango cha CSS chomvera, mutha kukhazikitsa dongosolo loyambira patsamba lanu lomwe limagwirizana bwino ndi zida zosiyanasiyana ndi makulidwe azithunzi. Mutha kukonza mosavuta zinthu za tsamba lanu pogwiritsa ntchito ma gridi operekedwa ndi chimango, chomwe chimalola kuti pakhale kusanja kosasintha pazida zonse.

🚀 Yesani kumasulira pazida zonse

Ndikofunikira kuyesa mawonekedwe a tsamba lanu pamakompyuta, mapiritsi ndi mafoni a m'manja kuti muwonetsetse kuti amagwirizana bwino ndi m'lifupi mwake.

Asakatuli ambiri amakono, monga Google Chrome ndi Mozilla Firefox, perekani zida zachitukuko zophatikizika. Zida izi zimakupatsani mwayi woyerekeza zida ndi makulidwe osiyanasiyana kuti muwone momwe tsamba lawebusayiti likuyendera. Mutha kupeza zida izi podina kumanja patsamba ndikusankha "Yendani"Kapena"Onani chinthu".

Pali ntchito zaulere pa intaneti monga BrowserStack ndi CrossBrowserTesting zomwe zimakupatsani mwayi woyesa momwe tsamba lawebusayiti limagwirira ntchito pazida zosiyanasiyana ndi asakatuli. Ntchitozi zimakupatsani mwayi wowonera tsamba lanu pazida zowoneka bwino kapena zakuthupi, ndikukudziwitsani momveka bwino momwe zidzawonekere pachida chilichonse.

Ma emulators a zida ndi zoyeserera ndi mapulogalamu omwe amatengera mawonekedwe ndi machitidwe a zida zenizeni. Mwachitsanzo, kuyesa pa iOS, mutha kugwiritsa ntchito emulator ya Xcode pazida za Apple.

Kwa Android, emulator ya Android Studio ilipo. Zida izi zimakupatsani mwayi woyesa tsamba lanu pazida zenizeni zokhala ndi zowonera zosiyanasiyana.

🚀 Pewani zinthu zokhazikika

Kuti tsamba lanu liziyankha, ndikofunikira kupewa zinthu zazikuluzikulu. Nawa maupangiri kuti mukwaniritse izi:

Gwiritsani ntchito miyeso yosinthasintha: M'malo mogwiritsa ntchito ma pixel (px) kufotokozera kukula kwa zinthu, m'malo mwake gwiritsani ntchito miyeso yosinthika monga maperesenti (%) kapena mayunitsi owonera (vh, vw). Izi zimathandiza kuti zinthu zizikula molingana ndi kukula kwa zenera.

Gwiritsani ntchito zoyika flexible: Ma gridi osinthika, monga omwe amaperekedwa ndi machitidwe omvera a CSS, amakulolani kuti mupange masanjidwe osinthika pogwiritsa ntchito zipilala zosinthika ndi mizere. Izi zimalola kuti zinthu zizisintha zokha malinga ndi kukula kwa skrini, zomwe zimapatsa ogwiritsa ntchito nthawi zonse pazida zonse.

Pewani kukula kokhazikika kwa zithunzi: M'malo motchula m'lifupi mwake kwa zithunzi, gwiritsani ntchito malo a CSS "max-width: 100%;" kulola zithunzi kuti zisinthe kukula molingana ndi kukula kwa chidebe chawo. Izi zimatsimikizira kuti zithunzi zimagwirizana bwino ndi zida zosiyanasiyana popanda kusefukira kapena kusokoneza.

Gwiritsani ntchito mafunso atolankhani: Mafunso azama media ndi malamulo a CSS omwe amakulolani kugwiritsa ntchito masitayelo osiyanasiyana kutengera kukula kwa chinsalu. Agwiritseni ntchito kuti asinthe mawonekedwe azinthu pazosankha zosiyanasiyana zazithunzi kuti muwongolere kuwonera pa chipangizo chilichonse.

🚀 Sambani navigation yam'manja

Kuti muchepetse mayendedwe am'manja ndikupatsa ogwiritsa ntchito bwino, nawa maupangiri oyenera kutsatira:

Gwiritsani ntchito menyu ya navigation ya m'manja: Sinthani masanjidwe amtundu wanthawi zonse ndi mndandanda wazoyenda zam'manja, monga menyu wa hamburger. Menyu yamtunduwu imathandizira kuchepetsa kusokoneza kwa skrini ndikupangitsa kuyenda kwanzeru kwa ogwiritsa ntchito mafoni.

Chepetsani kuchuluka kwa zinthu zoyenda: Chepetsani kuchuluka kwa zinthu zoyendera zomwe zikuwonetsedwa pamenyu yam'manja. Dziwani zinthu zofunika kwambiri ndikuyang'anani kuti muzitha kuyenda mosavuta. Mukhozanso kuyika zinthu zofanana m'magulu kuti mupewe mndandanda wautali.

Gwiritsani ntchito navigation ya mlingo umodzi : Pewani mindandanda yotsitsa yovuta yokhala ndi magawo angapo ang'onoang'ono pazida zam'manja. M'malo mwake, sankhani mayendedwe amtundu umodzi, pomwe ogwiritsa ntchito amatha kuyenda molunjika ku zigawo zazikulu za tsambalo popanda kudutsa magawo angapo.

Gwiritsani ntchito mabatani omveka bwino: Gwiritsani ntchito mabatani omveka bwino, osavuta kuwonekera kuti muwongolere ogwiritsa ntchito kuzinthu zinazake, monga kuwonjezera chinthu pangolo kapena kutumiza fomu. Onetsetsani kuti mabataniwo ndi akulu mokwanira kuti muzitha kugundidwa mosavuta ndi chala chanu.

Gwiritsani ntchito zithunzi mwanzeru: Gwiritsani ntchito zithunzi zozindikirika kuti muyimire zochita kapena magulu pamindandanda yazakudya zam'manja. Zithunzi zopangidwa mwaluso zitha kuthandiza ogwiritsa ntchito kumvetsetsa mwachangu tanthauzo la zinthu zoyenda popanda kuwerenga zilembo zazitali.

🚀 Kutseka

Mapangidwe a Masamba omvera akhala chofunikira kupatsa ogwiritsa ntchito zabwino pazida zonse.

Potsatira njira zabwino monga kugwiritsa ntchito mayunitsi osinthika a CSS, kugwiritsa ntchito mafunso atolankhani kapena kukhathamiritsa zithunzi, tsamba lililonse litha kusinthidwa bwino.

Chifukwa cha malamulo osavuta awa, mudzatsimikizira kuti tsamba lanu liwonetsedwe bwino pamakompyuta apakompyuta, mapiritsi ndi mafoni. Palibenso kuwonera ndi kunja kwa navigation yabwino!

Kuti mupite patsogolo, ndikupangira kugwiritsa ntchito pulogalamu yowonjezera ya WP Rocket pa WordPress. Idzakulolani kuti muwonjezere momwe mungathere kuthamanga kwa tsamba lanu womvera. Tsamba lomwe limakhala losinthika komanso lothamanga kwambiri ndilofunika kwambiri zokumana nazo wosayenerera!

FAQ

Q: Kodi kamangidwe kake?

A: The makonzedwe omvera ndi njira yopangira webusayiti yomwe cholinga chake ndi kupanga tsamba lawebusayiti chosinthika komanso chogwira ntchito pazida zonse ndi makulidwe a skrini. Imalola zomwe zili ndi masanjidwe kuti zisinthidwe zokha kuti zipereke mwayi wogwiritsa ntchito bwino, kaya pakompyuta, piritsi kapena foni yam'manja.

Q: Chifukwa chiyani ndikofunikira kupanga tsamba lawebusayiti kuti liyankhe?

Yankho: Kupanga tsamba lawebusayiti ndikofunikira kuti pakhale mawonekedwe osasinthika, abwino kwa ogwiritsa ntchito pazida zonse. Pogwiritsa ntchito zida zam'manja zikuchulukirachulukira, ndikofunikira kusintha tsamba lanu kuti likwaniritse zomwe ogwiritsa ntchito akuyembekezera ndikukweza masanjidwe anu a injini zosakira.

Q: Kodi mfundo zazikuluzikulu zakukula kwa intaneti ndi ziti?

Yankho: Mfundo zazikuluzikulu za chitukuko chapaintaneti zomwe zimayankhidwa ndi monga kugwiritsa ntchito ma grid osinthika, kupewa zinthu zazikuluzikulu, kusintha zithunzi, kugwiritsa ntchito mafunso atolankhani kugwiritsa ntchito masitayelo osiyanasiyana malinga ndi kukula kwa chithunzicho.

Q: Kodi chimango chomvera cha CSS ndi chiyani?

A: A Chimango cha CSS Responsive ndi gulu la masitayelo opangidwa kale a CSS ndi zigawo zomvera zomwe zimapangitsa kukhala kosavuta kupanga tsamba lomvera. Zomangamangazi, monga Bootstrap, Foundation, ndi Bulma, zimapereka ma gridi osinthika, makalasi okonzeka kugwiritsa ntchito CSS, ndi zigawo zomvera kuti zifulumizitse chitukuko.

Q: Kodi ndimayesa bwanji momwe tsamba lawebusayiti limaperekera pazida zosiyanasiyana?

Yankho: Kuti muyese momwe tsamba lawebusayiti limagwirira ntchito pazida zosiyanasiyana, mutha kugwiritsa ntchito zida za msakatuli zomwe zimakupatsani mwayi woyerekeza kukula kwazithunzi. Mutha kugwiritsanso ntchito ntchito zapaintaneti, zoyezera zida kapena zoyeserera, kapena kuyesa pazida zenizeni zenizeni.

Q: Ndi njira ziti zabwino zochepetsera kuyenda kwa mafoni?

Yankho: Kuti muchepetse kusakatula kwa m'manja, gwiritsani ntchito menyu yoyendera yam'manja monga menyu ya hamburger, kuchepetsa kuchuluka kwa zinthu zoyenda, gwiritsani ntchito mayendedwe amtundu umodzi, gwiritsani ntchito mabatani omveka bwino, konzekerani kutsitsa mwachangu, gwiritsani ntchito zithunzi zowoneka bwino ndikuyesa kuyenda pafupipafupi pazosiyana. zipangizo.

Q: Kodi ndingatani kuti tsamba langa lomwe lilipo likhale lomvera?

A: Kuti tsamba lanu lomwe lilipo liyankhe, mutha kugwiritsa ntchito dongosolo la CSS lomvera kuti likhale losavuta kukhazikitsa mawonekedwe osinthika. Mufunikanso kusintha khodi ya CSS yomwe ilipo kuti mugwiritse ntchito miyeso yosinthika, kupewa zinthu zazikuluzikulu, ndikugwiritsa ntchito masitayilo enaake kumawonekedwe osiyanasiyana a skrini pogwiritsa ntchito mafunso atolankhani.