{"id":187,"date":"2023-06-02T18:19:35","date_gmt":"2023-06-02T16:19:35","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=187"},"modified":"2023-06-02T18:49:14","modified_gmt":"2023-06-02T16:49:14","slug":"media-queries","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/media-queries\/","title":{"rendered":"T\u00e8cniques per fer webs responsitives (responsive)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Qualsevol lloc web s&#8217;ha de veure correctament a qualsevol dispositiu, independentment del navegador, el sistema operatiu i la mida de la pantalla. Diem que qualsevol lloc web ha de ser <strong><em>responsive<\/em><\/strong> o <strong>respositi<\/strong>u.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per crear llocs webs que s&#8217;adaptin a qualsevol dispositiu, podem fer-nos preguntes a mida que anem generant el CSS (no esperem al final):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aix\u00f2 que estic estilant, ho puc estilar de forma que funcioni a tot arreu b\u00e9?<\/li>\n\n\n\n<li>Aquests valors que dono a una propietat, s&#8217;haurien d&#8217;aplicar nom\u00e9s a dispositius grans? O nom\u00e9s a dispositius petits?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A l&#8217;hora d&#8217;aplicar el CSS, el millor \u00e9s seguir la t\u00e9cnica anomenada <strong>Mobile first<\/strong>: generar estils que permetin que la web es vegi b\u00e9 a dispositius petits, i, si cal,  si aquestes regles no serveixen per dispositius grans, afegir instruccions per aquells dispositius. Si pot ser, per\u00f2, escriurem el CSS de forma que serveixi per a qualsevol dispositiu.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img{\n   width: 100%;\n   max-width: 360px;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\">En aquest exemple, les imatges s'adaptaran a l'amplada de la pantalla, per\u00f2 no creixerant tant com per veure's gegants a dispositius grans. Quan arribin als 360px, no creixeran m\u00e9s.<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>img{\n   width:480px;\n   max-width:100%;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\">En aquest cas, les imatges faran 480px, per\u00f2 si la pantalla \u00e9s m\u00e9s petita no faran m\u00e9s del 100% de la pantalla.  <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Els dos exemples anteriors, permeten estilar les imatges de manera que funcionin b\u00e9 a qualsevol dispositiu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quan aix\u00f2 no \u00e9s possible (quan no podem fer una regla a proba de qualsevol dispositiu), aleshores podem fer servir <strong>Media Queries.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les Media Queries<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les Media Queries permeten agrupar una o m\u00e9s regles de CSS que volem aplicar nom\u00e9s en algunes condicions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1{\n     font-size: 20px;\n}\np{\n    font-size:16px;\n}\n\n@media all and (min-width:768px){\n    h1{\n        font-size: 30px;\n    }\n    p{\n        font-size: 20px;\n    }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\">En aquest exemple, els h1 seran de 20px i els par\u00e0grafs 16px. Nom\u00e9s en dispositius de m\u00e9s de 768px d'amplada, els h2 faran 30px i el par\u00e0grafs 20px.<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Les condicions tamb\u00e9 poden expressar-se en m\u00e0xims:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all and (max-width:767px){<br>}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-verse\">En aquest cas, la regla nom\u00e9s s'aplicar\u00e0 quan les pantalles siguin petites, fins a 767px.<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9 podem fer una media query per aplicar regles als dispositius m\u00e9s grans d&#8217;una mida per\u00f2 m\u00e9s petits que una altra:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all and (min-width:768px) and (max-width:1024px){\n....\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Per tant, a l&#8217;hora d&#8217;aplicar media queries, hem de decidir a partir de quin punt s&#8217;aplicaran les regles. Aquests punts s\u00f3n els <strong>breakpoints o punts de ruptura<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"390\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen.png\" alt=\"\" class=\"wp-image-196\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen.png 1000w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-300x117.png 300w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-768x300.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ara mateix, els breakpoints m\u00e9s emprats s\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fins a 480px: m\u00f2bils<\/li>\n\n\n\n<li>De 481px a 768px: m\u00f2bils en horitzontals i tablets en vertical<\/li>\n\n\n\n<li>De 769px fins a 1279px: tablets en horitzontals i ordinadors petits (tipus port\u00e0til)<\/li>\n\n\n\n<li>A partir de 1280px, ordinadors de sobretaula<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Aquests punts de ruptura poden ser uns altres i poden anar variant amb el temps, a mida que els dispositius tenen m\u00e9s resoluci\u00f3.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplica media queries al teu exercici de les pioneres per poder veure&#8217;l correctament a qualsevol dispositiu<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">T&#8217;animes a fer servir aquestes t\u00e8cniques per limitar l&#8217;amplada del text de les pioneres? Ara mateix el text va de banda a banda.. i a pantalles grans es fa dif\u00edcil de llegir<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Qualsevol lloc web s&#8217;ha de veure correctament a qualsevol dispositiu, independentment del navegador, el sistema operatiu i la mida de la pantalla. Diem que qualsevol lloc web ha de ser responsive o respositiu. Per crear llocs webs que s&#8217;adaptin a qualsevol dispositiu, podem fer-nos preguntes a mida que anem generant el CSS (no esperem al&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/media-queries\/\">Continueu llegint <span class=\"screen-reader-text\">T\u00e8cniques per fer webs responsitives (responsive)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-187","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":9,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":215,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/187\/revisions\/215"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}