Maitiro ekuita kuti webhusaiti ipindure?

Nedemocratization yemafoni uye mahwendefa, kugadzira webhusaiti wirirana zvave zvakakosha. Saiti inoteerera inokwanisa kuchinjika kune akasiyana mabhurawuza zvishandiso - desktop, nhare, piritsi - kupa yakakwana mushandisi ruzivo. Webhusaiti inopindura yakanakirawo web referencing.

Sekureva kweGoogle, zvinodarika makumi matanhatu muzana ekutsvaga zvavepo kuitwa kubva panharembozha. Saka zvakakosha kukwirisa saiti yako yezvishandiso izvi, zvikasadaro traffic yako inodonha. Zvakadaro masayiti mazhinji haasati agadzirwa zvinochinjika.

Mazuva ano, dhizaini yeanonzi "mawebhusaiti"wirirana” (kana kuti zvinochinjika) zvave zvakakosha. Asi izvi zvinorevei chaizvo? Iwe unoita sei kuti webhusaiti igadziriswe kune ese skrini saizi?

Dhizaini inopindura inosanganisira kugadzira saiti inokwanisa kuchinjika otomatiki maererano nemagadzirirwo uye zviyero kuti ipe yakakwana mushandisi ruzivo pamidziyo yese: desktops 🖥️, mapiritsi 💻, smartphones 📱.

Heano akakosha maitiro ekuisa panzvimbo yekugadzira inoteerera zvakakwana saiti:

🚀 Shandisa mayunitsi ehukama (%, em, rem) kwete mapixels muCSS

Kuti ubvumire kuchinjika kwakazara kwezvinhu, zvinokurudzirwa kushandisa hukama hwechiyero senge %, em kana rem panzvimbo pemapikisi akaiswa mumitemo yako yeCSS. Mazana anobvumira otomatiki resize zvichienderana nehukuru hwescreen.

Imwe yeakakosha maitiro akanakisa e kugadzira saiti inopindura ndeyekudzivisa kushandisa mapixel akaiswa mumitemo yeCSS yako. Chokwadi, mapixel haatenderi saizi yezvinhu kuti igadziriswe zvichienderana nechishandiso.

Zvinokurudzirwa kufadza anonzi mayunitsi ehukama se muzana (%), em kana rem panzvimbo. Iyo % kunyanya inobvumira otomatiki resizing yemabhokisi, zvinyorwa, margin, nezvimwe. zvichienderana nehukuru hwescreen.

Semuenzaniso, hupamhi hwakagadzirirwa 50% muCSS ichava nechokwadi chekuti chinhu chinogara chichitora makumi mashanu muzana ehupamhi huripo, ingave paPC, piritsi kana smartphone skrini. Iyi nzira yemvura yakanakira kugadzira marongero anochinjika anogadzirisa zvakakwana.

🚀 Tsanangura mibvunzo midhiya muCSS stylesheet

CSS midhiya mibvunzo yakakosha mirairo ye gadzira webhusaiti inoteerera. Vanokutendera kuti utsanangure mitemo yeCSS chaiyo inozoshanda zvichienderana nehupamhi hwehwindo rekuratidzira (viewport).

Iwe unogona kutsanangura zviri nyore marongero, mafonti, miganho, nezvimwe. zvakasiyana zvichienderana nekuti mushandisi ari padesktop komputa, piritsi kana smartphone. Somuenzaniso, tinogona kutsanangura izvozvo pasi pe768px yakafara, navigation shanduko kune hamburger menyu.

Mivhunzo yeMedia inokutendera kuti ugadzirise zvakanaka kupa uye kurongeka kwezvinhu zvinoenderana nehukuru hwescreen. Yakasanganiswa neinochinjika CSS mayunitsi, iwo akakosha kune gadzira saiti yakakwana inopindura uye inopa yakanakisa mushandisi ruzivo.

🚀 Ita kuti mifananidzo iite

Mifananidzo inofanirawo gadziridzwa kudzivirira kuti vasatambanuke zvisina kuenzana pane mimwe michina. Naizvozvo gadzirisa mifananidzo yako yeSEO. Iyo yakareruka yakanakisa tsika ndeye kuseta hupamhi hwavo sechikamu muHTML kodhi kana kuburikidza neCSS.

Tinogona zvakare kushandisa CSS pfuma "max-upamhi: 100%" kuitira kuti mufananidzo wacho uenderane nemudziyo wayo uchichengetedza zviyero zvayo. Zvinokurudzirwawo kutsanangura akati wandei mavhezheni emufananidzo mumwechete pakugadziriswa kwakasiyana uye kuratidza kubrowser kuti ndeipi vhezheni yekushandisa zvichienderana nehukuru hwescreen kuburikidza ne " hunhu.srcset".

Mukupindura, mapikicha anofanirwa kusimba otomatiki pane kutambanudza, kuve nechokwadi chemhando yepamusoro pamidziyo yese.

🚀 Shandisa inopindura CSS chimiro

Kushandisa inopindura CSS chimiro ndeimwe yeakanakisa maitiro ekuita kuti webhusaiti ipindure. CSS masisitimu seBootstrap, Nheyo, Bulma, uye Materialize inopa yakafanotsanangurwa dhizaini magidhi uye zvinhu zvinopindura zvinoita kuti zvive nyore kugadzira webhusaiti inoteerera.

Aya masisitimu anopa akagadzirira-kushandisa-CSS makirasi anobvumidza iwe kugadzira marongero peji inoshanduka uye inopindura. Ivo vanoshandisa matekiniki akadai semidhiya mibvunzo kugadzirisa otomatiki marongerwo uye masitaera zvichienderana nesaizi yechidzitiro chemudziyo unoshandiswa kuona saiti.

Nekushandisa inopindura CSS dhizaini, unogona kukurumidza kuseta yekutanga chimiro chewebhusaiti yako inochinjika mushe kune akasiyana zvishandiso uye saizi yeskrini. Iwe unogona kurongedza zviri nyore yako saiti zvinhu uchishandisa magidhi akapihwa neiyo sisitimu, iyo inobvumira dhizaini inowirirana pamidziyo yese.

🚀 Yedzo yekupa pamidziyo yese

Izvo zvakakosha kuti uedze kuratidzwa kwewebhusaiti yako pamakomputa, mahwendefa uye nharembozha kuti uone kuti inochinjika zvakakwana kune yega yega skrini.

Mabhurawuza mazhinji emazuva ano, akadai se Google Chrome uye Mozilla Firefox, inopa maturusi ekuvandudza akabatanidzwa. Zvishandiso izvi zvinokutendera kuti uteedzere maturusi akasiyana uye saizi yescreen kuti uone kupihwa kwewebhusaiti. Unogona kuwana zvishandiso izvi nekudzvanya-kurudyi pane peji uye wobva wasarudza "Ongorora"kana"Ongorora chinhu".

Kune emahara online masevhisi akadai BrowserStack uye CrossBrowserTesting izvo zvinokutendera kuti uedze kupihwa kwewebhusaiti pane akasiyana siyana emidziyo uye mabhurawuza. Aya masevhisi anotendera iwe kuti utarise webhusaiti yako pane akasiyana dhizaini kana emuviri zvishandiso, achikupa iwe pfungwa yakajeka yekuti ichataridzika sei pane yega yega mudziyo.

Mudziyo emulators uye simulators isoftware inodzokorora hunhu uye maitiro emidziyo chaiyo. Semuenzaniso, kuyedza paIOS, unogona kushandisa Xcode emulator yeApple zvishandiso.

Ye Android, Android Studio emulator inowanikwa. Zvishandiso izvi zvinokutendera kuti uedze webhusaiti yako pamidziyo chaiyo ine akasiyana screen resolution.

🚀 Dzivisa zvakagadziriswa saizi zvinhu

Kuita kuti webhusaiti ipindure, zvakakosha kudzivirira zvakagadziriswa-saizi zvinhu. Heano mamwe matipi ekuita izvi:

Shandisa mayuniti ekuyera anochinjika: Panzvimbo pekushandisa mapixels (px) kutsanangura saizi yezvinhu, pachinzvimbo chekushandisa mayuniti anochinjika echiyero senge muzana (%) kana mayuniti ekuona (vh, vw). Izvi zvinobvumira zvinhu kuti zvikwire zvakaenzanirana nehukuru hwescreen.

Shandisa flexible racks: Flexible grids, senge idzo dzakapihwa neinoteerera CSS masisitimu, inokutendera iwe kuti ugadzire anochinjika marongero uchishandisa anochinjika makoramu nemitsara. Izvi zvinobvumira zvinhu kuti zvigadzirise otomatiki zvichienderana nehukuru hwescreen, zvichipa ruzivo rwakafanana rwemushandisi pamidziyo yese.

Dzivisa upamhi hwakatarwa hwemifananidzo: Panzvimbo pekutsanangura hupamhi hwakatarwa hwemifananidzo, shandisa CSS pfuma "max-width: 100%;" kubvumira mifananidzo kuti iwedzere kukura zvichienderana nehukuru hwemudziyo wavo. Izvi zvinogonesa kuti mifananidzo inoenderana nemazvo kune akasiyana zvishandiso pasina kupfachukira kana kukanganisa.

Shandisa iyo mivhunzo midhiya: Mivhunzo yeMedia mitemo yeCSS inobvumidza iwe kushandisa masitaera akasiyana zvichienderana nehukuru hwescreen. Vashandise kugadzirisa maitiro ezvimiro zveakasiyana skrini zvigadziriso kuti uwedzere kutarisa pane imwe neimwe kifaa.

🚀 Rerutsa kufamba kwenhare

Kurerutsa kufamba kwenhare uye kupa zvirinani mushandisi ruzivo, heano mamwe matipi ekutevera:

Shandisa menyu yekufambisa nharembozha: Tsiva iyo yechinyakare yekufambisa menyu nefoni yekufambisa menyu, senge hamburger menyu. Iyi mhando yemenu inobatsira kuderedza screen clutter uye inoita kuti kufamba kuve nyore kune vashandisi venhare.

Deredza huwandu hwezvinhu zvekufambisa: Deredza huwandu hwezvinhu zvekufambisa zvinoratidzwa mune nharembozha. Ziva izvo zvakanyanya kukosha uye tarisa pazviri kuitira nyore kufamba. Iwe unogona zvakare kuisa zvinhu zvakafanana pasi pezvikamu kuti udzivise menyu yakareba.

Shandisa imwe-level navigation : Dzivisa akaomesesa ekudonhedza-pasi menyu ane akati wandei mazinga e submenus pane nharembozha. Pane kudaro, sarudza imwe-level navigation, apo vashandisi vanogona kufamba vakananga kuzvikamu zvikuru zvesaiti pasina kufamba nepakati pemazinga akawanda.

Shandisa mabhatani echiito akajeka: Shandisa mabhatani echiito akajeka, anobatika zviri nyore kutungamira vashandisi kune zvimwe zviitiko, sekuwedzera chigadzirwa mungoro kana kuendesa fomu. Ita shuwa kuti mabhatani akakura zvekuti anogona kubaya nyore nemunwe wako.

Shandisa intuitive icons: Shandisa zvidhori zvinozivikanwa kumiririra zviito kana zvikamu mune iyo mobile navigation menyu. Mifananidzo yakanyatsogadzirwa inogona kubatsira vashandisi nekukurumidza kunzwisisa zvinorehwa nezvinhu zvekufambisa pasina kuverenga mavara marefu.

🚀 Kuvhara

Magadzirirwo e Nzvimbo dzinoteerera dzave chinhu chinodiwa kupa mhando yemushandisi ruzivo pamidziyo yese.

Nekutevera maitiro akanakisa akadai sekushandisa anochinjika eCSS mayunitsi, kushandisa midhiya mivhunzo kana optimize mapikicha, chero webhusaiti inogona kuitwa inochinjika.

Nekuda kweiyi mitemo mishoma iri nyore, iwe unovimbisa kuratidzwa kwakaringana kwewebhusaiti yako pamakomputa edesktop, mahwendefa uye mafoni. Hapasisina kuswededza mukati nekunze kuitira kufamba zvakanaka!

Kuti uenderere mberi, ndinokurudzira kushandisa iyo ine simba WP Rocket plugin paWordPress. Ichakubvumidza kuti uwedzere zvakanyanya sezvinobvira kumhanya kwekurodha kwesaiti yako pindura. Saiti iyo inochinjika uye yakanyanya-kukurumidza ndiyo kiyi yeku ruzivo rwevashandisi impeccable!

FAQ

Mubvunzo: Chii chinopindura dhizaini?

A: The wirirana patani inzira yekugadzira webhu inovavarira kugadzira webhusaiti inogadzirisa uye inoshanda pamidziyo yese uye saizi yescreen. Iyo inobvumira zvirimo uye dhizaini kuti zvigadzirise otomatiki kuti ipe yakakwana mushandisi ruzivo, ingave iri padesktop, piritsi kana smartphone.

Mubvunzo: Sei zvakakosha kuita kuti webhusaiti ipindure?

A: Kuita kuti webhusaiti ipindure kwakakosha pakupa inowirirana, yemhando yemushandisi ruzivo pamidziyo yese. Nekushandiswa kwenharembozha kuri kuwedzera, zvakakosha kugadzirisa webhusaiti yako kuti isangane nezvinotarisirwa nemushandisi uye kugadzirisa yako yekutsvaga injini masanji.

Mubvunzo: Ndeapi mamisimboti akakosha ekupindura webhu kuvandudza?

A: Misimboti yakakosha yekuvandudzwa kwewebhu inopindura zvinosanganisira kushandisa magidhi anochinjika, kudzivirira zvinhu zvesaizi yakatarwa, kugadzirisa mifananidzo, kushandisa mivhunzo yemedia kuisa masitaira akasiyana zvichienderana nekukura kwemufananidzo. skrini, uye kurerutsa kwekufamba parunhare.

Mubvunzo: Chii chinopindura CSS framework?

A: A CSS chimiro Responsive seti ye pre-yakagadzirwa CSS masitayipi uye inopindura zvikamu zvinoita kuti zvive nyore kugadzira webhusaiti inoteerera. Aya masisitimu, akadai seBootstrap, Nheyo, uye Bulma, anopa anochinjika dhizaini magidhi, akagadzirira-kushandisa-CSS makirasi, uye anopindura zvinhu kuti akurumidze kusimudzira maitiro.

Mubvunzo: Ndinoedza sei kuti webhusaiti inoita sei pamidziyo yakasiyana?

A: Kuti uedze mashandisiro anoita webhusaiti pamidziyo yakasiyana, unogona kushandisa zvishandiso zvebrowser zvinokutendera kuti uteedzere masaizi akasiyana siyana. Iwe unogona zvakare kushandisa masevhisi epamhepo, emulator yemidziyo kana simulators, kana kuyedza pamidziyo chaiyo yemuviri.

Mubvunzo: Ndedzipi dzakanakisa maitiro ekurerutsa kufamba kwenharembozha?

A: Kurerutsa kufamba kwenharembozha, shandisa nharembozha yekufambisa senge hamburger menyu, kudzikisira huwandu hwezvinhu zvekufambisa, shandisa nhanho imwe chete, shandisa mabhatani ekuita akajeka, gadzirisa kurodha nekukurumidza, shandisa intuitive icons uye gara uchiyedza kufamba pane dzakasiyana. zvishandiso.

Mubvunzo: Ndingaita sei kuti webhusaiti yangu iripo ipindure?

A: Kuita kuti webhusaiti yako iripo ipindure, unogona kushandisa inoteedzera CSS framework kuti zvive nyore kumisa inogadzirisa chimiro. Iwe zvakare unozofanirwa kugadzirisa iripo CSS kodhi kuti ushandise inochinjika mayuniti ekuyera, kudzivirira yakagadziriswa-saizi zvinhu, uye shandisa masitaera chaiwo kumasikirwo akasiyana-siyana uchishandisa midhiya mibvunzo.