La sintakso por ambaŭ min-larĝa kaj max-larĝa amaskomunikiloj
Respondema retejo-dezajno estas aliro al konstruado de retpaĝoj, kie tiuj paĝoj povas dinamike ŝanĝi sian aranĝon kaj aspekton bazitan sur la grandeco de vizitanto . Grandaj ekranoj povas ricevi aranĝon konvenitan al tiuj pli grandaj ekranoj dum pli malgrandaj aparatoj, kiel poŝtelefonoj, povas ricevi la saman retejon formatitan laŭ maniero taŭga por tiu pli malgranda ekrano. Ĉi tiu aliro havigas pli bonan sperton de uzanto por ĉiuj uzantoj kaj eĉ povas helpi plibonigi la serĉajn rangojn . Grava parto de respondema retejo dezajno estas CSS-Duona Demandoj.
Duona Demandoj estas kiel malmultaj kondiĉaj deklaroj en la CSS-dosiero de via retejo, permesante al vi agordi certajn CSS-regulojn, kiuj nur ricevos efikon, kiam certa kondiĉo estas konata - kiel kiam grandeco de ekrano estas supre aŭ sub certaj sojloj.
Duona Demandoj en Ago
Do kiel vi uzas Media Demandojn en retejo? Jen tre simpla ekzemplo:
- Vi komencus kun bone strukturita HTML-dokumento senpage de iuj vidaj stiloj (tio estas kio CSS estas por)
- En via CSS-dosiero, vi komencos, kiel vi kutime faros per la paĝo kaj fiksas bazan linion por kiel aspektos la retejo. Diru, ke vi volis, ke la grandeco de la paĝo estas 16 rastrumeroj, vi povus skribi ĉi tiun CSS: body {font-size: 16px; }
- Nun, vi eble volas pliigi tiun tiparon por pli grandaj ekranoj, kiuj havas ampleksan nemoveblaĵon por fari ĝin. Jen kie Media-Demandoj startas. Vi komencus Duona Demando kiel ĉi: @media-ekrano kaj (min-larĝa: 1000px) {}
- Ĉi tio estas la sintakso de Duona Konsilo. Ĝi komenciĝas per @media por establi la Media-Demokraton mem. Tuj poste vi agordas la "amaskomunikilaron", kiu en ĉi tiu kazo estas "ekrano". Ĉi tio aplikiĝas al labortablaj komputilaj ekranoj, tablojdoj, telefonoj ktp. Fine, vi finos la Duona Demando kun la "komunikilo". En nia ekzemplo supre, tio estas "meza larĝa: 1000px". Ĉi tio signifas, ke la Duona Konsilo batalos por ekranoj kun minimuma larĝo de 1000 pikseloj larĝe.
- Post ĉi tiuj elementoj de la amaskomunikilaro Query, vi aldonas malferman kaj fermantan buklan bracelan similan al tio, kion vi farus en iu normala CSS-regulo.
- La fina paŝo al Duona Demando estas aldoni la CSS-regulojn, kiujn vi volas apliki, kiam ĉi tiu kondiĉo estas renkontita. Vi aldonas ĉi tiujn CSS-regulojn inter la buklaj krampoj, kiuj formas la Media-Demandon, kiel ĉi: @media-ekrano kaj (min-larĝa: 1000px) {body {font-size: 20px; }
- Kiam la kondiĉoj de la Media Demando estas renkontitaj (la foliumilo estas almenaŭ 1000 pikseloj larĝe), ĉi tiu CSS-stilo efektive efikos, ŝanĝante la tiparon de nia retejo de la 16 pikseloj, kiujn ni establis origine al nia nova valoro de 20 pikseloj.
Aldonante Pli Stiloj
Vi povus meti tiom multe da CSS-reguloj ene de ĉi Media-Demokrato kiel necesas por ĝustigi la vidan aspekton de via retejo. Ekzemple, se vi volis ne nur pliigi la font-grandecon al 20 pikseloj, sed ankaŭ ŝanĝi la koloron de ĉiuj alineoj al nigra (# 000000), vi povus aldoni ĉi tion:
@media-ekrano kaj (min-larĝa: 1000px) {body {font-size: 20px; } p {koloro: # 000000; }}Aldonante pliajn amaskomunikilarojn
Aldone, vi povas aldoni pliajn amaskomunikilojn por ĉiu pli granda grando, aldonante ilin al via stilo-folio kiel ĉi:
@media-ekrano kaj (min-larĝa: 1000px) {body {font-size: 20px; } p {koloro: # 000000; {} @media-ekrano kaj (min-larĝa: 1400px) {body {font-size: 24px; }}La unuaj amaskomunikiloj komenciĝos je 1000 pikseloj larĝe, ŝanĝante la tiparon ĝis 20 pikseloj. Tiam, kiam la retumilo estis pli ol 1400 rastrumeroj, la tipara grandeco ŝanĝus denove al 24 rastrumeroj. Vi povus aldoni tiom da Duona Demandoj kiel bezonas por via aparta retejo.
Min-Larĝeco kaj Max-Larĝeco
Ĝenerale estas du manieroj skribi Media Demandojn - per "min-larĝa" aŭ "max-larĝa". Ĝis nun ni vidis "min-larĝa" en ago. Ĉi tio kaŭzas, ke Media-Demandoj efektive efikas, kiam retumilo atingis almenaŭ tiun minimuman larĝecon. Do serĉo kiu uzas "min-larĝa: 1000px" apliki kiam la retumilo estas almenaŭ 1000 pikseloj larĝe. Ĉi tiu stilo de Media Query estas uzata kiam vi konstruas retejon en "movebla-unua" maniero.
Se vi uzas "max-larĝecon", ĝi funkcias kontraŭe. Duona interkonsento pri "max-larĝa: 1000px" apliki post kiam la retumilo falis sub ĉi tiu grandeco.
Koncerne al pli malnovaj foliumiloj
Unu defio kun Media Demandoj estas ilia manko de subteno en pli malnovaj versioj sur Interreta Esploristo. Feliĉe, ekzistas polifikoj disponeblaj, kiuj povas trankviligi subtenon por Media Demandoj en tiuj pli malnovaj foliumiloj, permesante vin uzi ilin en retejoj hodiaŭ, kvankam ili ankoraŭ certigas, ke la ekrano de tiu retejo ne aspektas rompita en pli malnova retumilo-programaro.
Redaktita de Jeremy Girard la 1/24/17