La sintaxi per a les consultes de mitjans de min ample i d'amplada màxima
El disseny web responsable és un enfocament per crear pàgines web on aquestes pàgines poden canviar dinàmicament el disseny i l'aparença segons la mida de la pantalla del visitant . Les pantalles grans poden rebre un disseny adequat a les pantalles més grans, mentre que els dispositius més petits, com ara els telèfons mòbils, poden rebre el mateix lloc web amb un format adequat per a aquesta pantalla més petita. Aquest enfocament proporciona una millor experiència d'usuari per a tots els usuaris i fins i tot pot ajudar a millorar el posicionament dels motors de cerca . Una part important del disseny web sensible és CSS Media Queries.
Les consultes de mitjans són com petites declaracions condicionals al fitxer CSS del vostre lloc web, que us permet establir determinades normes CSS que només afectaran una vegada que es compleixi una determinada condició, com quan la mida de la pantalla està per sobre o per sota d'uns quants llindars.
Consultes de mitjans en acció
Llavors, què faig servir Mitjana Consultes en un lloc web? Aquí teniu un exemple molt senzill:
- Començaràs amb un document HTML ben estructurat sense cap tipus d'estil visual (per a això és CSS)
- En el vostre fitxer CSS, començaríeu com normalment ho feu, al dissenyar la pàgina i establir una base de referència sobre com es veurà el lloc web. Digueu que voleu que la mida de la font de la pàgina sigui de 16 píxels, podeu escriure aquest CSS: body {font-size: 16px; }
- Ara, és possible que vulgueu augmentar la mida de la font per a pantalles més grans que tinguin una propietat immobiliària àmplia per fer-ho. Aquí és on s'inicia Media Queries. Comenceu una consulta de mitjans com aquesta: la pantalla @media i (min-width: 1000px) ()
- Aquesta és la sintaxi d'una consulta de mitjans. Comença amb @media per establir la mateixa consulta de mitjans. A continuació, configureu el "tipus de suport", que en aquest cas és "pantalla". Això s'aplica a les pantalles d'ordinadors, tauletes, telèfons, etc. Finalment, finalitzeu la consulta de mitjans amb la "funció de mitjans". En el nostre exemple anterior, que és "mid-width: 1000px". Això significa que Media Query iniciarà les pantalles amb un ample mínim de 1000 píxels d'amplada.
- Després d'aquests elements de la consulta de mitjans, afegiu una obertura i tancament d'ajustament arrissat similar al que faria en qualsevol norma CSS normal.
- El pas final d'una consulta de mitjans és afegir les regles CSS que voleu aplicar una vegada que es compleixi aquesta condició. Podeu afegir aquestes regles CSS entre els claudàtors que formen la consulta de missatges, així: @media i (min-width: 1000px) {body {font-size: 20px; }
- Quan es compleixin les condicions de la consulta de mitjans (la finestra del navegador té almenys 1000 píxels d'amplada), aquest estil CSS tindrà efecte, canviant la mida del tipus de lletra del lloc als 16 píxels establerts originalment al nostre nou valor de 20 píxels.
S'estan afegint més estils
Podeu col·locar tantes regles CSS dins d'aquesta consulta de mitjans com calgui per ajustar l'aparença visual del vostre lloc web. Per exemple, si voleu no només augmentar la mida de font a 20 píxels, sinó també canviar el color de tots els paràgrafs al negre (# 000000), podeu afegir-ho:
Pantalla @media i (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Agregar més consultes de mitjans
A més, podeu afegir més consultes multimèdia per a totes les mides més grans, afegint-les al vostre full d'estils com aquesta:
Pantalla @media i (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media screen and (min-width: 1400px) {body {font-size: 24px; }}Les primeres consultes multimèdia iniciarien en 1000 píxels d'amplada, canviant la mida de la font a 20 píxels. Després, una vegada que el navegador era superior a 1400 píxels, la mida de la font tornaria a canviar-se de nou a 24 píxels. Podeu afegir tantes consultes de mitjans com calgui per al vostre lloc web en particular.
Mínim amplada i amplada màxima
En general, hi ha dues maneres d'escriure consultes multimèdia: utilitzant "min-width" o amb "max-width". Fins ara, hem vist "min-width" en acció. Això fa que les consultes multimèdia tinguin efecte un cop el navegador hagi arribat almenys a aquest ample mínim. Així, una consulta que utilitzi "min-width: 1000px" s'aplicarà quan el navegador tingui almenys 1000 píxels d'amplada. Aquest estil de Media Query s'utilitza quan construeix un lloc de manera "mòbil".
Si utilitzeu "max-width", funciona de la manera contrària. Una consulta de mitjans de "max-width: 1000px" s'aplicaria una vegada que el navegador ha caigut per sota d'aquesta mida.
Quant als navegadors antics
Un repte amb Media Query és la seva falta de suport en versions anteriors a Internet Explorer. Afortunadament, hi ha disponibles polifils que poden patchar compatibilitat per a consultes multimèdia en aquells navegadors antics, que us permeten utilitzar-los als llocs web d'avui, tot i que asseguren que la visualització d'aquest lloc no es veu trencada en un programari de navegador més antic.
Editat per Jeremy Girard el 24/01/17