ʻO ka syntax no nā nīnau pāʻani min-'eleʻa a me kaʻenehana whānui
Loaʻa ka'apena pūnaewele i ke kūkuluʻana i nā pūnaewele pūnaewele kahi e hiki ai i kēlā mau palapala ke hoʻololi i ka holoʻokoʻa a me ka hiʻohiʻona e pili ana i ka nui o ka poʻe malihini kipa . Hiki i nā pale nui ke loaʻa i kahi papahana i pili i kēlā mau hōʻailona nui ma nā polokalamu liʻiliʻi, e like me nā kelepona pūnaewele, hiki ke loaʻa i kahi pūnaewele pūnaewele i hōʻanoʻia i keʻano i kūpono no kēlā'ōkuhi liʻiliʻi. ʻO kēia alahele e hāʻawi i kahiʻike pilikino maikaʻi aʻe no nā mea hoʻohana a pau a hiki iā ia ke kōkua i ka hoʻomaikaʻiʻana i nā kūlana huli engine . ʻO kahi mahele nui o ka pūnaewele pūnaewele pane maiʻo CSS Media Queries.
ʻO nāʻimi Media he mau'ōlelo kūlana liʻiliʻi ia i loko o ka pūnaewele CSS o kāu pūnaewele, eʻae ana iāʻoe e hoʻonoho i kekahi mau hoʻoponopono CSS e hoʻopili waleʻia inā loaʻa kekahiʻano - e like me ka nui o ka pehi ma luna a iʻole ma lalo o kekahi mau paepae.
Nā Kuleana Media i ka hana
No laila peheaʻoe e hoʻohana ai i nāʻimi Media Media ma kahi pūnaewele? Eia kekahi hiʻohiʻiʻano maʻalahi:
- E hoʻomakaʻoe me kahi palapala HTML i kālaiʻia me kaʻole o nāʻanoʻike (ʻo ia keʻano o CSS)
- Ma kāu pūnaewele CSS, hoʻomakaʻoe e like me kāu hana mau ma ka hanaʻana i kaʻaoʻao a hoʻonohonoho i ke kumu no kaʻikeʻana o ka pūnaewele. Makemakeʻoe i ka nui o ka pepa i 16 mau pika, hiki iāʻoe ke kākau i kēia CSS: body-font-size: 16px; }
- I kēia manawa, hiki paha iāʻoe ke hoʻonui i ka nui o nā mīkini nui no nā pale nunui i loaʻa ka waiwai kūpono e hana pēlā. Ma kēia kahi kahi iʻoki ai nā Media Queries. E hoʻomakaʻoe i kahi Uiui Uila like me kēia: @media screen and (min-width: 1000px) {}
- ʻO kēia ka hōʻailona o kahi hulina Media. E hoʻomaka me @media e hoʻokumu i ka Uiui Uila. A laila e hoʻonohonoho i ka "ʻano media", i loko o kēia hihia he "nānā". E pili ana kēia i nā pale kamepiula papapili, nā papa, nā leka, a me nā mea'ē aʻe. A hope, e hoʻopauʻoe i ka Media Query me ka "ʻano media". I ko mākou hiʻohiʻona i luna,ʻo ia ka "mid-wide: 1000px". Penei keʻano o ka Media QUERY e kīkiʻi no nā hōʻike me kahi'aku liʻiliʻi o 1000 pixels ākea.
- Ma hope o kēia mau māhele o ka Media Query, hoʻokomoʻoe i kahi pale kīkoʻo a me ka pale e like me ka mea e hana aiʻoe ma kekahi kaʻina CSS maʻamau.
- ʻO ka hopena hope loa i kahi Media Media e hāʻawi i nā kānāwai CSS e makemakeʻoe e hoʻohana i ka manawa e hālāwai ai kēiaʻano. Hoʻopiliʻoe i kēia mau kānāwai CSS ma waena o nā pale pale i kūkulu i ka Media Query, e like me kēia: @media screen and (min-width: 1000px) {body {font-size: 20px; }
- Ke huiʻia nā kūlana o ka Media QUERY (ʻo ka puka o ke kelepona he 1000 pixels wide), e hoʻokōʻia kēia style CSS, e hoʻololi i ka nui o ka momona o ka pūnaewele mai nā 16 pika i hoʻokumu muaʻia i ko mākou nui o 20 pixels.
Pākuʻi i nā Sty Styles
Hiki iāʻoe ke hoʻokomo i nā kānāwai CSS i loko o kēia Media QUery ma ka mea e pono ai e hoʻololi i kaʻikeʻana o kāu pūnaewele. No ka laʻana, inā makemakeʻoeʻaʻole e hoʻonui i ka momotuhi 20 mau pika wale nō, akā, e hoʻololi paha i ke kala o nā paukū i kaʻeleʻele (# 000000), hiki iāʻoe ke hoʻohui i kēia:
@ ka nānā a me (min-whānui: 1000px) {body {font-size: 20px; } p {helu: # 000000; }}Pākuʻi i nā noiʻi hou
Eia hou, hiki iāʻoe ke hoʻonui i nā hulina Media no nā nui nui, e hoʻonui iā lākou i kāuʻaoʻaoʻano like me kēia:
@ ka nānā a me (min-whānui: 1000px) {body {font-size: 20px; } p {helu: # 000000; {} @media āpau a me (min-whānui: 1400px) {body {font-size: 24px; }}Hiki i nā Media Queries mua ke kī i 1000 pixels whānui, me ka hoʻololiʻana i ka nui momona i 20 pika. A laila, i ka manawa iʻoi aku ke kiʻekiʻe o ka pūnaewele ma luna o 1400 pika, e hoʻololi hou ka nui i ka 24 pika. Hiki iāʻoe ke hōʻano i ka nui o nā hulina Media e pono ai no kāu pūnaewele pūnaewele.
ʻO ka Min-Width a me Max-Width
Aia ma keʻanoʻelua mauʻano e kākau ai iā Media Queries - ma o ka hoʻohanaʻana i "min-width" a me "max-width". I kēia manawa, uaʻike mākou i ka "min-broad" i ka hana. ʻO kēia ke kumu o ka hoʻohanaʻana i nā huahana Media ma kahi o ka polokalamu kele pūnaewele ma kahi liʻiliʻi loa. No laila, hoʻohanaʻia kahi hulina e hoʻohana ana i "min-width: 1000px" i ka manawa o ka mea hoʻohana ma kahi o 1000 pixels ākea. Ke hoʻohanaʻia nei kēiaʻano Media QUERY i ka wā e kūkulu neiʻoe i kahi papahana ma keʻano "pūnaewele-mua".
Inā hoʻohanaʻoe i ka "max-width", hana ia ma keʻano'ē aʻe. E pāʻani ka Media Media no "max-width: 1000px" i ka manawa i hāʻule ai ka pūnaewele i lalo o kēia nui.
No nā Pūnaewele Kiʻekiʻe
Hoʻokahi luʻi me ka Media Queries ko lākou nele i kākoʻo ma nāʻano kahiko ma Internet Explorer. Mahalo, hiki i nā polyfills e hiki ai ke kākoʻo i kākoʻo no Media Queries ma kēlā mau meaʻeleʻele kahiko, eʻae iāʻoe e hoʻohana i nā mea ma nā pūnaewele i kēia mau lā, oiai e hoʻomau ana i ka hōʻikeʻole o ka hōʻike o kēlā pūnaewele i ka haʻihaʻi i nā polokalamu kele pūnaewele kahiko.
Hoʻoponoponoʻia e Jeremy Girard ma ka lā 1/24/17