Ko te whakahuahua mo nga uiuinga pāpāho min-whānui me te whānui-whānui
Ko te hoahoatanga hoahoa tukutuku he huarahi ki te hanga i nga paetukutuku ka taea e enei whārangi te whakarereke i to raatau mahinga me te ahuatanga e pa ana ki te rahi o te mataoata . Ka taea e nga mata nui te tango i te mahinga e tika ana ki nga whakaaturanga nui atu i te mea he iti rawa nga whakaaro o te waea, me nga waea waea, ka taea te tiki i te paetukutuku ano e whakahiatohia ana i te ahua e tika ana mo te iti o te mata. Ko tenei huarahi e whakarato ana i te wheako kaiwhakamahi pai ake mo nga kaiwhakamahi katoa, a ka awhina pea ia ki te whakapai i te mahinga engine engine . Ko tetahi waahanga nui o te hoahoa tukutuku whakautu ko CSS Media Queries.
Ko nga Uiui Media he rite nga korero whaitake i roto i te kōnae CSS o to paetukutuku, ka taea ai e koe te whakarite i etahi ture CSS e pa ana ki te waahi ka tutuki tetahi ahua - me te mea he nui te rahi o te mata kei runga ake i raro i etahi paepae.
Nga Uiui Miiho i Te Mahi
Na kei te whakamahi koe i nga Uiui Motuhake i runga i te paetukutuku? Anei he tauira tino ngawari:
- Ka tīmata koe ki te tuhinga HTML-whaimana noa mai i nga ahua ataata (ko te mea ko te CSS mo te)
- I roto i to kōnae CSS, ka tīmata koe kia rite ki ta koe mahi ma te tautuhi i te whārangi me te whakatakoto i te raupapa mo te pehea e titiro ai te paetukutuku. Me kii koe i te rahi momotuhi o te whārangi hei 16 pika, ka taea e koe te tuhi i tenei CSS: tinana [font-size: 16px; }
- I teie nei, e hiahia ana koe ki te whakanui ake i te rahi momotuhi mo nga mata nui e nui ana nga taonga hei mahi. Koinei te wahi ka takahia e Queries Media. Ka tīmata koe i te Uiui Miihini penei: @media screen and (min-width: 1000px) {}
- Koinei te raupapa o te Uiui Motuhake. Ka timata i te @media ki te whakauru i te Uiui Miihini ano. I muri ka whakaturia e koe te "momo media", i roto i tenei take he "mata". E pa ana tenei ki nga matapihi rorohiko papamahi, papa, waea, aha atu. Hei whakamutunga, ka mutu te Uiui Miihini me te "awheawhe". I to tatou tauira i runga, ko te "waenganui-whānui: 1000px". Ko te tikanga tenei ko te Media Query ka kati mo nga whakaaturanga me te whanui iti o te 1000 pika te whanui.
- Muri iho i enei wahanga o te Uiui Motuhake, ka whakauruhia he taputapu pati me te kati me te mea ka mahia e koe ki tetahi ture CSS noa.
- Ko te taahiraa whakamutunga ki te Uiui Uiui ko te whakapiri i nga ture CSS e hiahia ana koe ki te tono ina tutuki tenei ahua. Ka tapiritia e koe enei ture CSS i waenga i nga awhina o te Paerewa Miihini, penei: @media mata me te (min-whānui: 1000px) {te tinana [momotuhi-rahi: 20px; }
- Ina tutakihia nga tikanga o te Uiui Motuhake (ko te matapihi o te matapihi kei te 1000 pika te whanui), ka whai hua tenei ahua CSS, ka huri i te rahi momotuhi o to maatau mai i nga pika 16 kua tautuhia ki to taatau hou o nga pihanga 20.
Te Whakanui i nga Tae Atu
Ka taea e koe te whakauru i nga ture CSS i roto i tenei Uiui Uiui ka hiahiatia hei whakatika i te ahua o to whakaaturanga o to paetukutuku. Hei tauira, mehemea ka hiahia koe ki te whakarahi ake i te momotuhi ki te 20 pika, engari ka huri ano hoki i te tae o nga parawae katoa ki te pango (# 000000), ka taea e koe te whakauru i tenei:
@media mata me te (min-whānui: 1000px) {tinana {momotuhi-rahi: 20px; } p {tae: # 000000; }}Te Tāpiri Atu i nga Uiui Motuhake
I tua atu, ka taea e koe te whakauru atu i nga uiui Media mo nga rahi nui, me te whakauru ki a raatau momo ahua penei:
@media mata me te (min-whānui: 1000px) {tinana {momotuhi-rahi: 20px; } p {tae: # 000000; {} @media mata me te (min-whānui: 1400px) {tinana-momotuhi-rahi: 24px; }}Ko nga Uiui Miihini tuatahi ka pihi ki te 1000 pika te whanui, ka huri i te rahi momotuhi ki te 20 pika. Na, i te wa i neke atu i te 1400 pika te tirotiro, ka huri ano te rahi momotuhi ki nga pika 24. Ka taea e koe te taapiri i te maha o nga Uiui Motuhake ka hiahiatia mo to paetukutuku.
Min-Nui me te Max-Width
He maha nga huarahi hei tuhi i nga uiui Media - ma te whakamahi i te "min-whānui" me te "max-whanui". I tenei wa, kua kite tatou i te "min-whānui" i roto i te mahi. Ko tenei ka whakauruhia nga Uiui Motuhake i te wa ka tae mai te tirotiro ki te whanui iti. Na, ko te uiui e whakamahi ana i te "min-whānui: 1000px" ka whakamahi ina he 1000 pika noa te tirotiro. Ka whakamahia tenei momo Media Query ka hangaia e koe he pae i roto i te tikanga "waea-tuatahi".
Ki te whakamahi koe i te "max-whanui", kei te mahi i te ritenga ke. Ko te Uiui Paerewa o te "max-width: 1000px" ka whakamahi i te waahi kua hinga te tumuaki i raro i tenei rahi.
Mō nga Pūtirotiro Tawhito
Kotahi te wero ki nga Uiui Miiho ko to ratou kore tautoko i nga putanga tawhito ki Internet Explorer. Mauruuru, kei te wātea nga pounamu e taea ana te tautoko i nga Uiui Media i roto i aua hunga tawhito pakeke, ka taea ai e koe te whakamahi i runga i nga paetukutuku i tenei ra, me te whakarite tonu kaore te ahua o taua pae e pakaru i te rorohiko tawhito.
I whakatikaia e Jeremy Girard i te 1/24/17