Min-zabalera eta gehienezko zabalera-media galderen sintaxia
Web diseinu sentiberatzailea web orrien eraikuntzara hurbiltzea da. Orrialde horiek bisitariaren pantaila-tamainaren arabera diseinatu eta itxura dinamikoak izan ditzakete. Pantaila handiak pantaila handiagoetarako egokitutako diseinu bat jasoko du, gailu txikiagoek, adibidez, telefono mugikor bezalakoak, pantaila txikiagoa duten modu egokian formateatutako web berbera jasoko dute. Ikuspegi honek erabiltzaile guztien esperientzia hobea eskaintzen du erabiltzaile guztientzat eta bilatzaileen sailkapenak hobetzen laguntzen du. Web diseinu sentikorreko zati garrantzitsu bat CSS Media Queries da.
Media kontsultak zure webguneko CSS fitxategian baimen baldintza txikiak bezalakoak dira, CSS arauak zenbait baldintza betetzen direnean soilik eragina izango duten zenbait baldintza zehaztu ahal izateko, esate baterako, pantailaren tamaina atal jakin batzuen gainetik edo azpitik dagoenean.
Ekintza medikoen kontsultak
Beraz, nola erabiltzen duzu Media Queries webgune batean? Hemen adibide oso erraza da.
- Dokumentu HTML bezain egituratua HTML formatuan irekiko zenuke (hau da, CSS)
- Zure CSS fitxategian, normalean orrialdeak diseinatzeko eta web orriaren itxura nola lerratzen den azaltzen lagunduko dizu. Esan 16 orriko letra-tipoaren tamaina nahi duzula, CSS hau idatzi: gorputza {font-size: 16px; }
- Orain, letra-tamaina handitu nahi baduzu, hamaika higiezinen zabala duten pantailetan. Hemen Media Queries-en sartuko zara. Honekin Media Query bat abiaraziko zenuke: @media pantaila eta (min-zabalera: 1000px) {}
- Hau da Media Queryren sintaxia. @media-rekin hasten da Media Query bera ezartzeko. Hurrengoa "motako euskarria" ezartzen baduzu, kasu honetan "pantaila" izango da. Ordenagailuko ordenagailuko pantailetan, piluletan, telefonoetan eta abarretan aplikatzen da. Azkenik, Media Query "media funtzioarekin" amaituko duzu. Goiko adibidean, "erdialdean zabalera: 1000 px" da. Horrek esan nahi du Media Query-k bistaratzeak 1000 pixeleko zabalera gutxieneko zabalera izango duela.
- Media Query-en elementu hauen ondoren, irekitzen eta itxi egiten duzu giltza arrunta, CSS arau normalean egiten duzunaren antzekoa.
- Media Query-en azken urratsa baldintza hori betetzen denean behin betiko aplikatu nahi dituzun CSS arauak gehitzea da. CSS arau hauek gehitu dituzu Media Query osatzen duten kizkurren artean, hau da: @media pantaila eta (min-zabalera: 1000px) {body {font-size: 20px; }
- Media Query baldintzak betetzen direnean (arakatzailearen leihoaren gutxienez 1000 pixeleko zabalera da gutxienez), CSS estilo honek eragina izango du, gure gunearen letra-tipoa 16 pixel-pixeletik hasita jartzen dugu gure 20 pixeleko balio berria.
Estilo gehiago gehitzea
CSS arau ugari izan ditzakezu Media Query honen barruan zure webgunearen itxura bisuala doitzeko. Adibidez, 20 pixeleko letra-tamaina handitzeko bakarrik nahi ez baduzu, baina paragrafo guztien kolorea beltza (# 000000) aldatzeko, hau gehi dezakezu:
@media pantaila eta (min-zabalera: 1000px) {body {font-size: 20px; } p {kolorea: # 000000; }}Gehitu gehiago Media kontsultak
Gainera, Media Queries gehiago gehi ditzakezu tamaina handiagoetarako, honela zure estiloko orriari gehituz:
@media pantaila eta (min-zabalera: 1000px) {body {font-size: 20px; } p {kolorea: # 000000; {} @media pantaila eta (min-zabalera: 1400px) {body {font-size: 24px; }}Lehenengo Media Queries 1000 pixeleko zabaleran jaurtiko litzateke, 20 metroko letra-tamaina aldatuz. Orduan, arakatzaileak 1.400 pixel baino gehiago zituenean, letra-tamaina 24 aldiz aldatu zen berriro. Zure webguneko behar bezala beharrezkoak diren Media kontsultak gehi ditzakezu.
Gutxieneko zabalera eta zabalera maximoa
Komunikabideen kontsultak idazteko bi modu daude normalean: "min-zabalera" edo "max-width" erabiliz. Orain arte, "min-zabalera" ekintza ikusi dugu. Horrek eragiten du Media kontsultak nabigatzaile batek gutxieneko zabalera gutxienez lortu duela. Beraz, "min-zabalera: 1000 px" erabiltzen duen kontsulta aplikatuko da, gutxienez 1000 pixel zabalekoa denean. Media Query estilo hau "lehen mugikorreko" modu batean eraikitzen ari zarenean erabiltzen da.
"Gehienezko zabalera" erabiltzen baduzu, kontrakoa egiten du. "Max-width: 1000px" kontsulta mediko bat aplikatuko litzateke arakatzailearen tamaina azpitik jaisten denean.
Nabigatzaile zaharragoei dagokienez
Media Queries-en erronka Internet Explorer-en bertsio zaharragoetan euskarririk ez izatea da. Zorionez, badira polifilioak erabilgarriak diren euskarrien kontsultak adabakia adabakia zaien arakatzaile zaharretan, gaur egun webguneetan erabil ditzazun oraindik ere, gune horren bistaratzeak ez duela arakatzailearen software zaharragoa hautsi.
Jeremy Girard-ek argitaratua 17/24/17