Tècniques per fer webs responsitives (responsive)

Qualsevol lloc web s’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’adaptin a qualsevol dispositiu, podem fer-nos preguntes a mida que anem generant el CSS (no esperem al final):

• Això que estic estilant, ho puc estilar de forma que funcioni a tot arreu bé?
• Aquests valors que dono a una propietat, s’haurien d’aplicar només a dispositius grans? O només a dispositius petits?

A l’hora d’aplicar el CSS, el millor és seguir la técnica anomenada Mobile first: generar estils que permetin que la web es vegi bé a dispositius petits, i, si cal, si aquestes regles no serveixen per dispositius grans, afegir instruccions per aquells dispositius. Si pot ser, però, escriurem el CSS de forma que serveixi per a qualsevol dispositiu.

img{
   width: 100%;
   max-width: 360px;
}

En aquest exemple, les imatges s'adaptaran a l'amplada de la pantalla, però no creixerant tant com per veure's gegants a dispositius grans. Quan arribin als 360px, no creixeran més.

img{
   width:480px;
   max-width:100%;
}

En aquest cas, les imatges faran 480px, però si la pantalla és més petita no faran més del 100% de la pantalla.  

Els dos exemples anteriors, permeten estilar les imatges de manera que funcionin bé a qualsevol dispositiu.

Quan això no és possible (quan no podem fer una regla a proba de qualsevol dispositiu), aleshores podem fer servir Media Queries.

Les Media Queries

Les Media Queries permeten agrupar una o més regles de CSS que volem aplicar només en algunes condicions.

h1{
     font-size: 20px;
}
p{
    font-size:16px;
}

@media all and (min-width:768px){
    h1{
        font-size: 30px;
    }
    p{
        font-size: 20px;
    }
}

En aquest exemple, els h1 seran de 20px i els paràgrafs 16px. Només en dispositius de més de 768px d'amplada, els h2 faran 30px i el paràgrafs 20px.

Les condicions també poden expressar-se en màxims:

@media all and (max-width:767px){
}

En aquest cas, la regla només s'aplicarà quan les pantalles siguin petites, fins a 767px.

També podem fer una media query per aplicar regles als dispositius més grans d’una mida però més petits que una altra:

@media all and (min-width:768px) and (max-width:1024px){
....
}

Per tant, a l’hora d’aplicar media queries, hem de decidir a partir de quin punt s’aplicaran les regles. Aquests punts són els breakpoints o punts de ruptura.

Ara mateix, els breakpoints més emprats són:

• Fins a 480px: mòbils
• De 481px a 768px: mòbils en horitzontals i tablets en vertical
• De 769px fins a 1279px: tablets en horitzontals i ordinadors petits (tipus portàtil)
• A partir de 1280px, ordinadors de sobretaula

Aquests punts de ruptura poden ser uns altres i poden anar variant amb el temps, a mida que els dispositius tenen més resolució.