diff options
Diffstat (limited to 'files/ca/learn/css/disseny_css/disseny_responsiu/index.html')
| -rw-r--r-- | files/ca/learn/css/disseny_css/disseny_responsiu/index.html | 324 |
1 files changed, 324 insertions, 0 deletions
diff --git a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html b/files/ca/learn/css/disseny_css/disseny_responsiu/index.html new file mode 100644 index 0000000000..5bf909e6e7 --- /dev/null +++ b/files/ca/learn/css/disseny_css/disseny_responsiu/index.html @@ -0,0 +1,324 @@ +--- +title: Disseny responsiu +slug: Learn/CSS/Disseny_CSS/Disseny_responsiu +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de <em>disseny web responsiu</em> (RWD o <em>responsive web design</em>), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Conceptes bàsics d’HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), i nocions de com funciona el CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb el CSS</a> i els <a href="/ca/docs/Learn/CSS/Building_blocks">elements bàsics del CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre els conceptes fonamentals i la història del disseny responsiu.</td> + </tr> + </tbody> +</table> + +<h2 id="Història_dels_dissenys_de_pàgina_web">Història dels dissenys de pàgina web</h2> + +<p>En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:</p> + +<ul> + <li>Podies crear un lloc web <em>líquid</em>, que s’estendria fins a omplir la finestra del navegador</li> + <li>o un lloc amb una <em>amplada fixa</em>, que tindria una mida fixa en píxels.</li> +</ul> + +<p>Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.</p> + +<figure><img alt="Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa aquest disseny de pàgina web líquid senzill: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">codi d’origen</a>. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.</p> +</div> + +<p>Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.</p> + +<figure><img alt="Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa aquest disseny de pàgina web senzill d’amplada fixa: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">codi d’origen</a>. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Les captures de pantalla de dalt es fan amb el <a href="/en-US/docs/Tools/Responsive_Design_Mode">mode de disseny responsiu</a> de les DevTools de Firefox.</p> +</div> + +<p>A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara <em>m.example.com</em> o <em>example.mobi</em>). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.</p> + +<p>A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.</p> + +<h2 id="Disseny_flexible_abans_del_disseny_responsiu">Disseny flexible abans del disseny responsiu</h2> + +<p>Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.</p> + +<p>Zoe Mickley Gillenwater va ser fonamental en <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">la seva tasca</a> de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.</p> + +<h2 id="El_disseny_responsiu">El disseny responsiu</h2> + +<p>El terme disseny responsiu va ser <a href="https://alistapart.com/article/responsive-web-design/">creat per Ethan Marcotte el 2010</a>, que va descriure l’ús de tres tècniques combinades.</p> + +<ol> + <li>La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid grids</a> (publicat el 2009 en <em>A list apart</em>).</li> + <li>La segona tècnica va ser la idea d’<a href="http://unstoppablerobotninja.com/entry/fluid-images">imatges fluides</a>. Utilitzant una tècnica molt senzilla d’establir la propietat <code>max-width</code> al <code>100%</code>, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.</li> + <li>El tercer component clau va ser la <a href="/en-US/docs/Web/CSS/Media_Queries">consulta de mèdia</a> (o <em>media query</em>). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.</li> +</ol> + +<p>És important entendre que <strong>el disseny web responsiu no és una tecnologia independent</strong>: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui <em>respondre</em> segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.</p> + +<p>La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.</p> + +<h2 id="Les_consultes_a_mèdia_media_queries">Les consultes a mèdia (<em>media queries</em>)</h2> + +<p>El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.</p> + +<p>Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector <code>.container</code> només s’aplica si aquestes dues coses són certes.</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com <em>punts de ruptura</em>.</p> + +<p>Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny <strong>mobile first</strong>.</p> + +<p>Trobaràs més informació en la documentació de MDN per a les <a href="/en-US/docs/Web/CSS/Media_Queries">consultes als mèdia</a>.</p> + +<h2 id="Graelles_flexibles">Graelles flexibles</h2> + +<p>Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.</p> + +<p>Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.</p> + +<p>En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">elements flotants</a>. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.</p> + +<pre class="notranslate"><code>target / context = result </code> +</pre> + +<p>Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.</p> + +<pre class="brush: css notranslate"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes heretats de disseny de pàgines web</a>. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.</p> + +<p>L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:</p> + +<figure><img alt="Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>En pantalles més amples es passa a dues columnes:</p> + +<figure><img alt="Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar l’<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en viu</a> i el <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">codi d’origen</a> d’aquest exemple a GitHub.</p> +</div> + +<h2 id="Tecnologies_modernes_de_disseny_de_pàgines_web">Tecnologies modernes de disseny de pàgines web</h2> + +<p>De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">disseny en múltiples columnes</a>, el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a> i el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">Grid</a> són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.</p> + +<h3 id="Multicol">Multicol</h3> + +<p>El més antic d’aquests mètodes de disseny de pàgines web és <code>multicol</code>: quan especifiques un nombre de columnes (<code>column-count</code>), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.</p> + +<pre class="brush: css notranslate"><code>.container { + column-count: 3; +} </code> +</pre> + +<p>Si en lloc d’això estableixes l’atribut <code>column-width</code>, especifiques una amplada <em>mínima</em>. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.</p> + +<pre class="brush: css notranslate"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="Flexbox">Flexbox</h3> + +<p>Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de <code>flex-grow</code> i <code>flex-shrink</code>, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.</p> + +<p>En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada <code>flex: 1</code>, com es descriu en l’article <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Disseny_CSS/Flexbox#Dimensi%C3%B3_flexible_dels_elements_flexibles">Flexbox: Dimensions flexibles d’elements flex</a>.</p> + +<pre class="brush: css notranslate"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">codi d’origen</a>.</p> +</div> + +<h3 id="Graella_CSS">Graella CSS</h3> + +<p>En el disseny de pàgines web amb graella CSS, la unitat <code>fr</code> permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida <code>1fr</code>. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Graelles flexibles amb la unitat fr</a>.</p> + +<pre class="brush: css notranslate"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">codi d’origen</a>.</p> +</div> + +<h2 id="Imatges_responsives">Imatges responsives</h2> + +<p>L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:</p> + +<pre class="brush: css notranslate"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.</p> + +<p>Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs <code>srcset</code> i <code>sizes</code> de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.</p> + +<p>També pots usar imatges de <em>director artístic</em>, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.</p> + +<p>Pots trobar una guia detallada sobre <a href="/ca/docs/Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles">Imatges responsives</a> en el mòdul Aprendre HTML de MDN.</p> + +<h2 id="Tipografia_responsiva">Tipografia responsiva</h2> + +<p>Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.</p> + +<p>En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en <code>4rem</code>, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys <code>1200px</code>.</p> + +<pre class="brush: css notranslate"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.</p> + +<p>En el dispositiu mòbil, el títol d’encapçalament és més petit:</p> + +<figure><img alt="Un esquema apilat amb una mida de títol d’encapçalament petita." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:</p> + +<figure><img alt="Un disseny de dues columnes amb un títol d’encapçalament gran." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa aquest exemple en acció: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">codi d’origen</a>.</p> +</div> + +<p>Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.</p> + +<h3 id="L’ús_d’unitats_de_finestra_de_visualització_per_a_tipografies_responsives">L’ús d’unitats de finestra de visualització per a tipografies responsives</h3> + +<p>Un enfocament interessant és utilitzar la unitat <code>vw</code> de finestra de visualització per a habilitar la tipografia responsiva. <code>1vw</code> és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb <code>vw</code>, sempre es relacionarà amb la mida de la finestra de visualització.</p> + +<pre class="brush: css notranslate">h1 { + font-size: 6vw; +}</pre> + +<p>El problema de fer servir la unitat <code>vw</code> és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. <strong>Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització</strong>.</p> + +<p>Hi ha una solució, que implica l’ús de <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. Si afegeixes la unitat <code>vw</code> a un conjunt de valors amb una mida fixa com <code>em</code> o <code>rem</code>, encara es pot fer zoom del text. Essencialment, la unitat <code>vw</code> s’afegeix a sobre d’aquest valor ampliat:</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.</p> + +<div class="blockIndicator note"> +<p>Observa aquest exemple en acció: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">codi d’origen</a>.</p> +</div> + +<h2 id="L’etiqueta_meta_de_la_finestra_de_visualització">L’etiqueta <code>meta</code> de la finestra de visualització</h2> + +<p>Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<code><head></code>) del document.</p> + +<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>Aquesta etiqueta <code>meta</code> indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.</p> + +<p>Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.</p> + +<p>Aquesta etiqueta <code>meta</code> existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.</p> + +<p>El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes <code>width=device-width</code>, sobreescrius l’amplada predeterminada d’Apple <code>width=960px</code> amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.</p> + +<p><strong>Per tant, <em>sempre</em> has d’incloure la línia HTML anterior a la capçalera dels teus documents.</strong></p> + +<p>Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta <code>meta</code> de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.</p> + +<ul> + <li><code>initial-scale</code>: Configura el zoom inicial de la pàgina, que establim a 1.</li> + <li><code>height</code>: Estableix una alçada específica per a la finestra de visualització.</li> + <li><code>minimum-scale</code>: Estableix el nivell mínim de zoom.</li> + <li><code>maximum-scale</code>: Estableix el nivell màxim de zoom.</li> + <li><code>user-scalable</code>: Impedeix fer zoom si es defineix <code>no</code>.</li> +</ul> + +<p>Has d’evitar l’ús de <code>minimum-scale</code>, <code>maximum-scale</code>, i en particular la configuració de <code>user-scalable</code> en <code>no</code>. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta <code>meta</code> de la finestra de visualització (<a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.</p> + +<p>També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elements flotants</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en diverses columnes</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny responsiu</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes de mèdia</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes heretats de disseny de pàgines web </a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat dels navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d’elements bàsics del disseny</a></li> +</ul> |