Meriv çawa malperek bersivdar çêdike?

Bi demokratîkbûna smartfon û tabletan, çêkirina malperekê pêrakirin bingehîn bûye. Malperek bersivdar dikare bixweber bi amûrên gerokê yên cihêreng re adapte bibe - sermaseya, mobîl, tablet - da ku ezmûnek bikarhênerek çêtirîn peyda bike. Malperek bersivdar jî ji bo baş e referansa webê.

Li gorî Google, zêdetirî 60% ji lêgerînan niha ne ji mobîl tê kirin. Ji ber vê yekê pêdivî ye ku hûn malpera xwe ji bo van cîhazan xweşbîn bikin, wekî din dê seyrûsefera we dakeve. Lêbelê gelek malper hîn jî bi adapteyî nehatine sêwirandin.

Niha, sêwirana bi navê "malperên malperê"pêrakirin” (an jî adapteyî) bûye esas. Lê bi rastî ev tê çi wateyê? Ma hûn çawa bi rastî malperek ji bo hemî pîvanên ekranê xweşbînkirî çê dikin?

Sêwirana bersivdar ji afirandina malperek pêk tê ku bikaribe bixweber di warê sêwirandin û pîvanan de adapte bibe da ku ezmûnek bikarhênerek çêtirîn li ser hemî cîhazan peyda bike: sermaseyên 🖥️, tablet 💻, smartphone 📱.

Li vir pratîkên çêtirîn ên sereke hene ku ji bo afirandina malperek bêkêmasî bersivdar têne danîn:

🚀 Di CSS-ê de li şûna pixelan yekîneyên têkildar (%, em, rem) bikar bînin

Ji bo ku rê bide adaptasyona tevahî ya hêmanan, tê pêşniyar kirin ku yekeyên pîvanê yên têkildar wekî mînak bikar bînin %, em an rem di qaîdeyên xwe yên CSS de ji bilî pixelên sabît. Sedî rê dide veguheztina otomatîkî ya li ser bingeha mezinahiya ekranê.

Yek ji pratîkên herî baş ên sereke ji bo afirandina malperek bersivdar ev e ku meriv xwe dûr bixe di qaîdeyên xwe yên CSS de pixelên sabît bikar bînin. Bi rastî, pixel rê nadin ku mezinahiya hêmanan li gorî cîhazê were adapte kirin.

Tête pêşniyar kirin ku ji bo yekeyên ku jê re tê gotin yekîneyên mîna sedî (%), em an rem di cih de. Bi taybetî % dê destûrê bide veguheztina otomatîkî ya qutiyan, nivîsan, marjînal, hwd. li gor mezinahiya ekranê.

Ji bo nimûne, a width set to 50% di CSS de dê piştrast bike ku hêman dê her gav 50% ji firehiya berdest bigire, çi li ser ekranek PC, tablet an smartphone. Ev nêzîkatiya şikilî ji bo afirandina sêwiranên maqûl ên ku bi rengek bêkêmasî biguhezîne îdeal e.

🚀 Di şêwaza şêwaza CSS de pirsên medyayê diyar bikin

Pirsên medya CSS ji bo rêwerzên bingehîn in malperek bersivdar biafirînin. Ew rê didin we ku hûn qaîdeyên taybetî yên CSS-ê yên ku dê li gorî firehiya pencereya pêşandanê (nîşanderê) bicîh bikin diyar bikin.

Hûn dikarin bi hêsanî sêwiran, tîpan, marjînal, hwd diyar bikin. li gorî ka bikarhêner li ser komputerek sermaseyê, tablet an jî smartphone ye, cûda ye. Bo nimûne, em dikarin wê di nav de diyar bikin li jêr 768px firehî, navîgasyon di menuya hamburger de diguhezîne.

Lêpirsînên medyayê dihêlin ku hûn li gorî mezinahiya ekranê veguheztin û birêkûpêkkirina hêmanan xweş biguncînin. Bi yekîneyên CSS-ê yên maqûl re, ew ji bo bingehîn in malperek bêkêmasî biafirîne bersivdar e û ezmûna çêtirîn bikarhêner peyda dike.

🚀 Wêneyan bersivdar bikin

Wêne jî divê were adaptekirin ji bo ku ew nehêlin ku li ser hin amûran bi rengekî bêkêmasî dirêj bibin. Ji ber vê yekê divê wêneyên xwe ji bo SEO xweş bikin. Pratîkek çêtirîn a hêsan ev e ku meriv firehiya wan wekî sedî di koda HTML-ê an bi CSS-ê de destnîşan bike.

Em dikarin taybetmendiya CSS-ê jî bikar bînin "max-firehiya: 100%" da ku wêne bi konteynera xwe re biguncîne dema ku nîsbetên xwe biparêze. Di heman demê de tê pêşniyar kirin ku hûn çend guhertoyên heman wêneyê bi çareseriyên cihêreng diyar bikin û ji gerokê re destnîşan bikin ka kîjan guhertoyê li gorî mezinahiya ekranê bi riya " taybetmendiyê re xizmet bike.srcset".

Di bersivdayînê de, pêdivî ye ku wêne ji bilî dirêjkirinê bixweber mezinahiyê veguherînin, da ku li ser hemî cîhazan qalîteya çêtirîn peyda bikin.

🚀 Çarçoveyek CSS-a bersivdar bikar bînin

Bikaranîna çarçoveyek CSS-a bersivdar yek ji pratîkên çêtirîn e ku ji bo çêkirina malperek bersivdar e. Çarçoveyên CSS yên mîna Bootstrap, Weqf, Bulma, û Materialize torên sêwirana pêşwext û hêmanên bersivdar pêşkêş dikin ku çêkirina malperek bersivdar hêsan dike.

Van çarçove dersên CSS-a amade-bikaranîna peyda dikin ku destûrê didin we ku hûn sêwiranan biafirînin rûpel nerm û bersivdar. Ew teknolojiyên wekî pirsên medyayê bikar tînin da ku bixweber sêwirandin û şêwazê li ser bingeha mezinahiya ekrana cîhaza ku ji bo dîtina malperê tê bikar anîn eyar bikin.

Bi karanîna çarçoveyek CSS-ê ya bersivdar, hûn dikarin zû avahiyek bingehîn ji bo malpera xwe saz bikin ku bi rêkûpêk bi cîhazên cihêreng û mezinahiyên ekranê re adapte dibe. Hûn dikarin bi hêsanî hêmanên malpera xwe bi karanîna torên ku ji hêla çarçoveyê ve têne peyda kirin organîze bikin, ku destûrê dide sêwirana domdar li hemî cîhazan.

🚀 Pêşkêşkirina ceribandinê li ser hemî cîhazan

Pêdivî ye ku meriv nîşana malpera xwe li ser komputer, tablet û têlefonan biceribîne da ku pê ewle bibe ku ew bi rengek bêkêmasî bi her firehiya ekranê re adapte dibe.

Pir gerokên nûjen, wek Google Chrome û Mozilla Firefox, amûrên pêşveçûnê yên yekbûyî pêşkêş dikin. Van amûran dihêlin ku hûn cîhazên cihêreng û mezinahiyên dîmenderê simul bikin da ku pêşandana malperê xuyang bikin. Hûn dikarin bi klîkkirina rastê li ser rûpelê û dûv re bijartina " bigihîjin van amûran.Berçavderbaskirin"an"Elementê kontrol bikin".

Xizmetên serhêl ên belaş ên wekî BrowserStack û CrossBrowserTesting ku destûrê dide te ku hûn pêşkêşkirina malperek li ser cûrbecûr amûr û gerokan ceribandin. Van karûbaran dihêlin ku hûn malpera xwe li ser cîhazên cihêreng an fizîkî bibînin, ji we re ramanek zelal dide ka ew ê li ser her cîhazê çawa xuya bike.

Emûlator û simulatorên cîhazê nermalava ku taybetmendî û tevgera cîhazên rastîn dubare dike. Mînakî, ji bo ceribandina li ser iOS-ê, hûn dikarin emulatora Xcode ji bo cîhazên Apple bikar bînin.

Ji bo Android, emulatora Android Studio heye. Van amûran dihêlin hûn malpera xwe li ser cîhazên virtual bi çareseriyên dîmendera cihêreng ceribandin.

🚀 Ji hêmanên mezinahiya sabît dûr bixin

Ji bo ku malperek bersivdar be, pêdivî ye ku meriv ji hêmanên pîvana sabît dûr bisekine. Li vir çend serişteyên ji bo bidestxistina vê hene:

Yekeyên pîvanê yên maqûl bikar bînin: Li şûna ku hûn pixel (px) bikar bînin da ku mezinahiya hêmanan diyar bikin, li şûna wê yekeyên pîvanê yên maqûl ên wekî sedî (%) an yekîneyên dîtinê (vh, vw) bikar bînin. Ev rê dide hêmanên ku bi pîvana mezinahiya ekranê re rêje bibin.

Refikên maqûl bikar bînin: Tûrên maqûl, mîna yên ku ji hêla çarçoveyên CSS-ê yên bersivdar ve têne peyda kirin, dihêlin hûn bi karanîna stûn û rêzikên maqûl biafirînin. Ev dihêle ku hêman bixweber xwe li gorî mezinahiya ekranê ji nû ve saz bikin, ezmûnek bikarhêner a domdar li seranserê cîhazan peyda bikin.

Ji firehiyên sabît ji bo wêneyan dûr bixin: Li şûna ku hûn ji bo wêneyan firehiyek sabît diyar bikin, taybetmendiya CSS-ê "max-width: 100%;" bikar bînin. da ku rê bidin wêneyan ku li gorî mezinahiya konteynera xwe mezinahiya wan were guhertin. Ev piştrast dike ku wêne bi rêkûpêk bi cîhazên cihêreng re bêyî serûbinkirin an guheztin biguhezînin.

Bikar bînin Pirsên medyayê: Pirsên medyayê qaîdeyên CSS-ê ne ku dihêle hûn li gorî mezinahiya ekranê şêwazên cûda bicîh bikin. Wan bikar bînin da ku şêwaza hêmanan ji bo çareseriyên cihêreng ên dîmenderê rast bikin da ku dîtina li ser her cîhazê xweşbîn bikin.

🚀 Navîgasyona mobîl hêsan bikin

Ji bo hêsankirina navîgasyona mobîl û peydakirina ezmûnek bikarhênerek çêtir, li vir çend serişteyên ku bişopînin hene:

Pêşek navîgasyonek mobîl bikar bînin: Menûya navîgasyonê ya kevneşopî bi menuya navîgasyonê ya mobîl, wekî menuya hamburger veguherînin. Ev celeb menu alîkar dike ku tevliheviya dîmenderê kêm bike û navîgasyon ji bo bikarhênerên mobîl hêniktir dike.

Hejmara hêmanên navîgasyonê bisînor bikin: Hejmara hêmanên navîgasyonê yên ku di menuya mobîl de têne xuyang kirin kêm bikin. Hêmanên herî girîng nas bikin û ji bo navîgasyon hêsantir li ser wan bisekinin. Her weha hûn dikarin tiştên wekhev di bin kategoriyan de kom bikin da ku ji pêşekek dirêj dûr bikevin.

Navîgasyon yek-asta bikar bînin : Ji pêşekên dakêşanê yên tevlihev ên bi gelek astên jêrmenuyan li ser cîhazên mobîl dûr bixin. Di şûna wê de, navîgasyonek yek-ast hilbijêrin, ku bikarhêner dikarin rasterast li beşên sereke yên malperê bigerin bêyî ku di gelek astê de rêve bibin.

Bişkojkên çalakiya zelal bikar bînin: Bişkokên çalakiyê yên zelal, bi hêsanî bikirtînin bikar bînin da ku bikarhêneran berbi kiryarên taybetî ve bibin, mîna lê zêdekirina hilberek li selikê an şandina formek. Piştrast bikin ku bişkok têra xwe mezin in ku bi tiliya xwe bi hêsanî lê bixin.

Îkonên intuitive bikar bînin: Îkonên naskirî bikar bînin da ku di menuya navîgasyonê ya mobîl de kiryar an kategoriyan temsîl bikin. Îkonên xweş-sêwirandî dikarin ji bikarhêneran re bibin alîkar ku zû wateya hêmanên navîgasyonê fam bikin bêyî ku hewce nebin ku etîketên dirêj bixwînin.

🚀 Girtin

The design of Malperên bersivdar bûne pêdiviyek da ku ezmûnek bikarhênerek bi kalîte li hemî cîhazan peyda bike.

Bi şopandina pratîkên çêtirîn ên wekî karanîna yekîneyên CSS-ê yên maqûl, bicihanîna pirsên medyayê an xweşbînkirina wêneyan, her malper dikare bêkêmasî were adaptekirin.

Bi saya van çend qaîdeyên hêsan, hûn ê nîşana çêtirîn ya malpera xwe li ser komputerên sermaseyê, tablet û smartphone garantî bikin. No zêdetir zoom in û derve ji bo navîgasyon rehet!

Ji bo ku hê bêtir biçin, ez pêşniyar dikim ku bikar bînin pêveka bihêz a WP Rocket li ser WordPress. Ew ê bihêle ku hûn bi qasî ku gengaz xweşbîn bikin leza barkirina malpera we pêrakirin. Malperek ku hem adaptîf û hem jî ultra-lez e mifteya wê ye tecrûbeya bikarhêner bêqisûr!

Pirs û Bersîv

Pirs: sêwirana bersivdar çi ye?

A: The designer responsive nêzîkatiyek sêwirana malperê ye ku armanc dike ku malperek çêbike adapteyî û fonksiyonel li ser hemî cîhaz û mezinahiyên ekranê. Ew dihêle naverok û layout bixweber were sererast kirin da ku ezmûnek bikarhênerek çêtirîn peyda bike, çi li ser sermaseyek, tablet an smartphone.

Pirs: Çima girîng e ku meriv malperek bersivdar bike?

A: Çêkirina malperek bersivdar ji bo peydakirina ezmûnek bikarhênerek domdar, bi kalîte li ser hemî cîhazan pêdivî ye. Bi zêdebûna karanîna cîhazên mobîl re, pir girîng e ku hûn malpera xwe biguncînin da ku hêviyên bikarhêner bicîh bîne û rêzikên motora lêgerîna xwe baştir bike.

Pirs: Prensîbên sereke yên pêşveçûna malperê ya bersivdar çi ne?

A: Prensîbên sereke yên pêşkeftina tevna bersivdar karanîna torên maqûl, dûrketina hêmanên mezinahiya sabît, adaptasyona wêneyan, karanîna pirsên medyayê ji bo sepandina şêwazên cihêreng li gorî mezinahiya wêneyê. ekran, û hêsankirina navîgasyon li ser mobîl e.

Pirs: Çarçoveyek CSS-a bersivdar çi ye?

A: A Çarçoveya CSS Bersiv komek şêwazên CSS-ê yên pêş-çêkirî û hêmanên bersivdar e ku çêkirina malperek bersivdar hêsan dike. Van çarçoweyan, wek Bootstrap, Weqf, û Bulma, torên sêwirana maqûl, dersên CSS-a-amade-kar-bikaranîna, û hêmanên bersivdar peyda dikin da ku pêvajoya pêşkeftinê bilezînin.

Pirs: Ez çawa ceribandim ka malperek çawa li ser cîhazên cihêreng dide?

A: Ji bo ceribandina ka malperek çawa li ser cîhazên cihêreng vedibêje, hûn dikarin amûrên pêşdebirker ên gerokê bikar bînin ku destûrê didin we ku hûn pîvanên cihêreng ên dîmenderê simul bikin. Her weha hûn dikarin karûbarên serhêl, emulatorên cîhazê an simulatoran bikar bînin, an jî li ser amûrên fîzîkî yên rastîn ceribandinê bikin.

Pirs: Ji bo hêsankirina navîgasyon mobîl çi pratîkên çêtirîn in?

A: Ji bo hêsankirina navîgasyonê ya mobîl, pêşekek navîgasyonek mobîl wekî menuya hamburger bikar bînin, hejmara hêmanên navîgasyonê bisînor bikin, navîgasyon yek-asta bikar bînin, bişkokên çalakiyê yên zelal bikar bînin, ji bo barkirina lezê xweşbîn bikin, îkonên xwerû bikar bînin û bi rêkûpêk navîgasyon li ser cûrbecûr ceribandin. cîhazên.

Pirs: Ez çawa dikarim malpera xwe ya heyî bersivdar bikim?

A: Ji bo ku hûn malpera xwe ya heyî bersivdar bikin, hûn dikarin çarçoveyek CSS-a bersivdar bikar bînin da ku sazkirina avahiyek adaptive hêsantir bike. Her weha hûn ê hewce bikin ku koda CSS ya heyî biguhezînin da ku yekîneyên pîvanê yên maqûl bikar bînin, ji hêmanên pîvana sabît dûr bixin, û şêwazên taybetî li ser pîvanên dîmendera cihêreng bi karanîna pirsên medyayê bicîh bikin.