Pehea e hoʻololi ai i kahi pūnaewele?

Me ka democratization o nā smartphones a me nā papa, hana i kahi pūnaewele responsive ua lilo i mea nui. Hiki i kahi paena pane ke hoʻololi maʻalahi i nā polokalamu kele like ʻole - pākaukau, lawe lima, papa - e hāʻawi i kahi ʻike mea hoʻohana maikaʻi loa. Maikaʻi nō hoʻi kahi pūnaewele pane kuhikuhi pūnaewele.

Wahi a Google, ʻoi aku ma mua o 60% o nā hulina i kēia manawa lawe ʻia mai kahi kelepona hele. No laila he mea nui e hoʻonui i kāu pūnaewele no kēia mau polokalamu, inā ʻaʻole e hāʻule kāu huakaʻi. ʻAʻole naʻe i hoʻolālā ʻia nā pūnaewele he nui.

I kēia mau lā, ʻo ka hoʻolālā ʻana o nā mea i kapa ʻia ʻo "pūnaewele pūnaewele"responsive” (a i ʻole hiki ke hoʻololi) ua lilo i mea nui. Akā he aha ke ʻano o kēia? Pehea ʻoe e hana ai i kahi pūnaewele i hoʻopaʻa ʻia no nā nui o ka pale?

ʻO ka hoʻolālā pane ka hana ʻana i kahi pūnaewele hiki ke hoʻololi maʻalahi i nā ʻōlelo o ka hoʻolālā a me nā ana e hāʻawi i kahi ʻike mea hoʻohana maikaʻi loa ma nā mea āpau: papapihi 🖥️, papa 💻, kelepona 📱.

Eia nā hoʻomaʻamaʻa maikaʻi loa e hoʻokumu i kahi pūnaewele pane maikaʻi loa:

🚀 E hoʻohana i nā ʻāpana pili (%, em, rem) ma mua o nā pika ma CSS

No ka ʻae ʻana i ka hoʻololi piha ʻana o nā mea, pono e hoʻohana i nā ʻāpana pili o ke ana e like me %, em a i ʻole rem ma mua o nā pika paʻa i kāu mau lula CSS. Hiki i nā pākēneka ke ho'ololi 'akomi ma muli o ka nui o ka pale.

ʻO kekahi o nā hana maikaʻi loa no ʻO ka hana ʻana i kahi paena pane e pale aku e hoʻohana i nā pika paʻa i kāu mau lula CSS. ʻOiaʻiʻo, ʻaʻole ʻae nā pika i ka nui o nā mea e hoʻololi ʻia ma muli o ka hāmeʻa.

Manaʻo ʻia e makemake i nā ʻāpana pili like pākēneka (%), em a i ʻole rem ma kahi. E ʻae ka % i ka hoʻololi hou ʻana i nā pahu, nā kikokikona, nā palena, a pēlā aku. ma muli o ka nui o ka pale.

No ka laʻana, he laula i hoʻonohonoho ʻia i 50% ma CSS e hōʻoia e lawe mau ka mea i ka 50% o ka laulā i loaʻa, inā ma ka PC, papa a i ʻole ka pale kelepona. He kūpono kēia ʻano wai no ka hana ʻana i nā hoʻolālā maʻalahi e hoʻololi pono.

🚀 Wehewehe i nā nīnau media ma ka pepa style CSS

He mau ʻōlelo aʻoaʻo koʻikoʻi nā nīnau media CSS hana i kahi pūnaewele pane. Hāʻawi lākou iā ʻoe e wehewehe i nā lula CSS kikoʻī e pili ana ma muli o ka laulā o ka puka aniani (viewport).

Hiki iā ʻoe ke kuhikuhi maʻalahi i nā hoʻolālā, font, margins, etc. ʻokoʻa ma muli o ka mea hoʻohana ma ke kamepiula papapihi, papa a i ʻole ke kelepona. No kekahi laʻana, hiki iā mākou ke wehewehe i kēlā ma ma lalo o 768px ākea, hoʻololi ka hoʻokele i ka papa hamburger.

ʻAe nā nīnau Media iā ʻoe e hoʻololi maikaʻi i ka unuhi ʻana a me ka hoʻonohonoho ʻana o nā mea e pili ana i ka nui o ka pale. Hoʻohui ʻia me nā ʻāpana CSS maʻalahi, pono lākou no hana i kahi kahua kūpono pane a hāʻawi i ka ʻike mea hoʻohana maikaʻi loa.

🚀 Hoʻopili i nā kiʻi

Pono pū nā kiʻi e hoʻololi no ka pale ʻana iā lākou mai ka hoʻopololei ʻole ʻana i kekahi mau mea hana. No laila pono hoʻonui i kāu mau kiʻi no SEO. ʻO kahi hana maʻalahi maʻalahi ka hoʻonohonoho ʻana i ko lākou laulā ma ke ʻano he pākēneka ma ka code HTML a i ʻole ma o CSS.

Hiki iā mākou ke hoʻohana i ka waiwai CSS “ākea-nui: 100%” i mea e hoʻololi ai ke kiʻi i kona pahu me ka mālama ʻana i kona ʻāpana. Manaʻo ʻia hoʻi e wehewehe i nā ʻano like ʻole o ke kiʻi hoʻokahi ma nā ʻōlelo hoʻoholo like ʻole a hōʻike i ka polokalamu kele i ka mana e lawelawe ai ma muli o ka nui o ka pale ma o ka " attributesrcset".

Ma ka pane ʻana, pono e hoʻololi ʻokoʻa nā kiʻi ma mua o ka hoʻolōʻihi ʻana, e hōʻoia i ka maikaʻi maikaʻi loa ma nā polokalamu āpau.

🚀 E hoʻohana i kahi kāʻei CSS pane

ʻO ka hoʻohana ʻana i kahi framework CSS responsive kekahi o nā hana maikaʻi loa no ka hana ʻana i kahi pūnaewele pane. Hāʻawi ka CSS frameworks e like me Bootstrap, Foundation, Bulma, a me Materialize i nā grids hoʻonohonoho i koho mua ʻia a me nā ʻāpana pane e maʻalahi ai ka hana ʻana i kahi pūnaewele pane.

Hāʻawi kēia mau papa hana i nā papa CSS mākaukau e hoʻohana iā ʻoe e hana i nā hoʻolālā ʻaoʻao maʻalahi a pane. Hoʻohana lākou i nā ʻenehana e like me nā nīnau media e hoʻoponopono aunoa i ka hoʻolālā a me ke ʻano e pili ana i ka nui o ka pale o ka mea i hoʻohana ʻia e nānā i ka pūnaewele.

Ma ka hoʻohana ʻana i kahi hoʻolālā CSS pane, hiki iā ʻoe ke hoʻonohonoho koke i kahi hoʻolālā kumu no kāu pūnaewele e hoʻololi mālie i nā mea like ʻole a me ka nui o ka pale. Hiki iā ʻoe ke hoʻonohonoho maʻalahi i nā mea o kāu pūnaewele me ka hoʻohana ʻana i nā grids i hāʻawi ʻia e ka framework, e ʻae ai i kahi hoʻonohonoho kūlike ma waena o nā mea āpau.

🚀 Ka hoʻāʻo ʻana i nā mea hana a pau

Pono e hoʻāʻo i ka hōʻike ʻana o kāu pūnaewele ma nā kamepiula, papa a me nā smartphones e hōʻoia i ka hoʻololi pono ʻana i kēlā me kēia ākea o ka pale.

ʻO ka hapa nui o nā polokalamu kele hou, e like me Google Chrome a me Mozilla Firefox, hāʻawi i nā mea hana hoʻomohala hoʻohui. Hāʻawi kēia mau mea hana iā ʻoe e hoʻohālikelike i nā mea like ʻole a me ka nui o ka pale e ʻike ai i ka hana ʻana o ka pūnaewele. Hiki iā ʻoe ke komo i kēia mau mea hana ma ke kaomi ʻana i ka ʻaoʻao a laila koho i ka "nānā"a i ʻole"E nānā i ka huakaʻi".

Aia nā lawelawe pūnaewele manuahi e like me BrowserStack a me CrossBrowserTesting e ʻae iā ʻoe e hoʻāʻo i ka hāʻawi ʻana i kahi pūnaewele ma nā ʻano mea like ʻole a me nā polokalamu kele pūnaewele. Hāʻawi kēia mau lawelawe iā ʻoe e nānā i kāu pūnaewele ma nā ʻaoʻao virtual a i ʻole nā ​​​​mea hana kino, e hāʻawi iā ʻoe i kahi manaʻo maopopo i ke ʻano o ka nānā ʻana i kēlā me kēia mea.

ʻO nā emulators a me nā simulators nā polokalamu e hoʻopili i nā ʻano a me nā ʻano o nā mea pono maoli. No ka laʻana, e hoʻāʻo ma iOS, hiki iā ʻoe ke hoʻohana i ka emulator Xcode no nā polokalamu Apple.

No Android, loaʻa ka emulator Android Studio. Hāʻawi kēia mau mea hana iā ʻoe e hoʻāʻo i kāu pūnaewele ma nā polokalamu virtual me nā ʻōlelo hoʻonā ʻokoʻa.

🚀 Hōʻalo i nā mea nui paʻa

No ka pane ʻana i kahi pūnaewele, pono e pale i nā mea paʻa-nui. Eia kekahi mau ʻōlelo aʻoaʻo e hoʻokō ai i kēia:

E hoʻohana i nā ʻāpana hikiwawe o ke ana: Ma kahi o ka hoʻohana ʻana i nā pika (px) no ka wehewehe ʻana i ka nui o nā mea, e hoʻohana i nā ʻāpana maʻalahi o ke ana e like me nā pākēneka (%) a i ʻole nā ​​ʻāpana viewport (vh, vw). Hāʻawi kēia i nā mea e hoʻohālikelike like me ka nui o ka pale.

E hoʻohana i nā lāʻau maʻalahi: Hiki iā ʻoe ke hana i nā hoʻolālā kūpono me ka hoʻohana ʻana i nā kolamu a me nā lālani maʻalahi. Hāʻawi kēia i nā mea e hoʻonohonoho hou iā lākou iho e pili ana i ka nui o ka pale, e hāʻawi ana i kahi ʻike mea hoʻohana maʻamau ma nā ʻaoʻao āpau.

Hōʻalo i nā laula paʻa no nā kiʻi: Ma kahi o ka wehewehe ʻana i ka laulā paʻa no nā kiʻi, e hoʻohana i ka waiwai CSS "max-width: 100%;" e ʻae i nā kiʻi e hoʻololi like i ka nui o kā lākou pahu. Mālama kēia i ka hoʻopili pololei ʻana o nā kiʻi i nā mea like ʻole me ka ʻole o ka hoʻomāhuahua ʻana a i ʻole ka hoʻololi ʻana.

E hoʻohana i ka nā nīnau media: ʻO nā nīnau media he mau lula CSS e hiki ai iā ʻoe ke hoʻohana i nā ʻano like ʻole ma muli o ka nui o ka pale. E hoʻohana iā lākou e hoʻoponopono i ke ʻano o nā mea no nā ʻōkuhi pale like ʻole e hoʻomaikaʻi i ka nānā ʻana ma kēlā me kēia hāmeʻa.

🚀 E maʻalahi i ka hoʻokele paʻa lima

No ka maʻalahi o ka hoʻokele kelepona a hāʻawi i kahi ʻike mea hoʻohana ʻoi aku ka maikaʻi, eia kekahi mau ʻōlelo aʻoaʻo e hahai ai:

E hoʻohana i ka papa kuhikuhi hoʻokele paʻa lima: E hoʻololi i ka papa kuhikuhi hoʻokele kuʻuna me kahi papa kuhikuhi hoʻokele kelepona, e like me ka papa hamburger. Kōkua kēia ʻano papa kuhikuhi i ka hoʻohaʻahaʻa ʻana i ka puʻupuʻu pale a hoʻoikaika i ka hoʻokele ʻana no nā mea hoʻohana kelepona.

E kaupalena i ka helu o nā mea hoʻokele: E ho'ēmi i ka helu o nā mea hoʻokele i hōʻike ʻia ma ka papa kuhikuhi kelepona. E ʻike i nā mea koʻikoʻi nui a nānā iā lākou no ka hoʻokele maʻalahi. Hiki iā ʻoe ke hui pū i nā mea like ma lalo o nā ʻāpana e pale i kahi papa kuhikuhi lōʻihi.

E hoʻohana i ka hoʻokele pae hoʻokahi : Hōʻalo i nā menus hāʻule iho paʻakikī me ka nui o nā submenus ma nā polokalamu kelepona. Akā, koho i ka hoʻokele pae hoʻokahi, kahi e hiki ai i nā mea hoʻohana ke hoʻokele pololei i nā ʻāpana nui o ka pūnaewele me ka ʻole e hoʻokele i nā pae he nui.

E hoʻohana i nā pihi hana maʻemaʻe: E hoʻohana i nā pihi hana maʻalahi a hiki ke kaomi maʻalahi e alakaʻi i nā mea hoʻohana i nā hana kikoʻī, e like me ka hoʻohui ʻana i kahi huahana i ke kaʻa a i ʻole ka waiho ʻana i kahi palapala. E hōʻoia i ka nui o nā pihi i hiki ke paʻi maʻalahi me kou manamana lima.

E hoʻohana i nā ikona intuitive: E hoʻohana i nā kiʻi ʻike ʻia e hōʻike i nā hana a i ʻole nā ​​waeʻano ma ka papa kuhikuhi hoʻokele kelepona. Hiki i nā kiʻi hoʻolālā maikaʻi ke kōkua i nā mea hoʻohana e hoʻomaopopo koke i ke ʻano o nā mea hoʻokele me ka ʻole e heluhelu i nā lepili lōʻihi.

🚀 Ke pani nei

ʻO ka hoʻolālā o Ua lilo nā pae pane i mea pono e hāʻawi i kahi ʻike mea hoʻohana maikaʻi ma nā ʻaoʻao āpau.

Ma ka hahai ʻana i nā hana maikaʻi loa e like me ka hoʻohana ʻana i nā ʻāpana CSS maʻalahi, ka hoʻokō ʻana i nā nīnau media a i ʻole ka hoʻonui ʻana i nā kiʻi, hiki ke hoʻololi pono ʻia kekahi pūnaewele.

Mahalo i kēia mau lula maʻalahi, e hōʻoiaʻiʻo ʻoe i ka hōʻike maikaʻi loa o kāu pūnaewele ma nā kamepiula papa, papa a me nā smartphones. ʻAʻole hoʻonui hou i loko a i waho no ka hoʻokele ʻoluʻolu!

No ka hele hou aku, paipai au e hoʻohana ka mana WP Rocket plugin ma WordPress. E ʻae iā ʻoe e hoʻonui i ka mea hiki ka wikiwiki o ka hoʻouka ʻana o kāu pūnaewele pane aku. ʻO kahi pūnaewele kūpono a me ka ultra-wikiwiki ke kī ʻike mea hoʻohana hala ole!

NPP

Q: He aha ka hoʻolālā pane?

A: Ka ka manaʻo hoʻopuka he ala hoʻolālā pūnaewele e manaʻo nei e hana i kahi pūnaewele hoʻololi a hana ma nā mea hana a pau a me ka nui o ka pale. Hāʻawi ia i ka ʻike a me ka hoʻolālā e hoʻoponopono ʻokoʻa e hāʻawi i kahi ʻike mea hoʻohana maikaʻi loa, inā ma ka pākaukau, papa a i ʻole kelepona.

N: No ke aha he mea nui e hoʻokō i kahi pūnaewele?

A: He mea nui ka pane ʻana i kahi pūnaewele i ka hāʻawi ʻana i ka ʻike mea hoʻohana kūlike a maikaʻi ma nā ʻaoʻao āpau. Me ka hoʻohana ʻana i nā polokalamu kelepona e hoʻonui, he mea koʻikoʻi ia e hoʻololi i kāu pūnaewele e hoʻokō i nā manaʻolana o ka mea hoʻohana a hoʻomaikaʻi i kāu pae ʻenekini huli.

Nīnau: He aha nā kumu nui o ka hoʻomohala pūnaewele pane?

A: ʻO nā loina koʻikoʻi o ka hoʻomohala pūnaewele pane e pili ana i ka hoʻohana ʻana i nā grids maʻalahi, ka pale ʻana i nā mea nui paʻa, ka hoʻololi ʻana i nā kiʻi, ka hoʻohana ʻana i nā nīnau media e hoʻopili i nā ʻano like ʻole e pili ana i ka nui o ke kiʻi.

Nīnau: He aha ke kāʻei CSS pane?

A: A Kumumanaʻo CSS ʻO Responsive kahi hoʻonohonoho o nā ʻano CSS i hana mua ʻia a me nā ʻāpana pane e maʻalahi i ka hana ʻana i kahi pūnaewele pane. ʻO kēia mau papa hana, e like me Bootstrap, Foundation, a me Bulma, e hāʻawi i nā papa kuhikuhi maʻalahi, nā papa CSS mākaukau e hoʻohana, a me nā mea pane e wikiwiki i ke kaʻina hana.

Nīnau: Pehea wau e hoʻāʻo ai i ka hana ʻana o kahi pūnaewele ma nā polokalamu like ʻole?

A: No ka hoʻāʻo ʻana i ka hana ʻana o kahi pūnaewele ma nā ʻaoʻao like ʻole, hiki iā ʻoe ke hoʻohana i nā mea hana hoʻomohala o ka polokalamu kele pūnaewele e ʻae iā ʻoe e hoʻohālike i nā nui pale like ʻole. Hiki iā ʻoe ke hoʻohana i nā lawelawe pūnaewele, nā emulators a i ʻole simulators, a i ʻole ka hoʻāʻo ʻana i nā mea kino maoli.

Nīnau: He aha nā hana maikaʻi loa no ka maʻalahi o ka hoʻokele kelepona?

A: No ka maʻalahi o ka hoʻokele kelepona, e hoʻohana i ka papa kuhikuhi hoʻokele kelepona e like me ka papa hamburger, e kaupalena i ka helu o nā mea hoʻokele, e hoʻohana i ka hoʻokele pae hoʻokahi, e hoʻohana i nā pihi hana maʻemaʻe, e koho no ka hoʻouka wikiwiki ʻana, e hoʻohana i nā kiʻi intuitive a hoʻāʻo mau i ka hoʻokele ma nā ʻokoʻa. nā mea hana.

Nīnau: Pehea e hiki ai iaʻu ke pane i kaʻu pūnaewele i kēia manawa?

A: No ka pane ʻana i kāu pūnaewele i kēia manawa, hiki iā ʻoe ke hoʻohana i kahi framework CSS pane i mea e maʻalahi ai ka hoʻonohonoho ʻana i kahi hoʻolālā adaptive. Pono ʻoe e hoʻololi i ka code CSS i loaʻa e hoʻohana i nā ʻāpana maʻalahi o ke ana, e pale i nā mea paʻa paʻa, a e hoʻopili i nā ʻano kikoʻī i nā nui pale like ʻole me ka hoʻohana ʻana i nā nīnau media.