En aquesta secció, aprendrem com fer que el nostre lloc web sigui completament responsiu, és a dir, que s'adapti correctament a diferents mides de pantalla i dispositius. Això és crucial en el desenvolupament web modern, ja que els usuaris accedeixen als llocs web des de diversos dispositius com ordinadors d'escriptori, tauletes i telèfons mòbils.
Objectius d'Aprenentatge
- Comprendre la importància del disseny responsiu.
- Utilitzar consultes de mitjans (media queries) per adaptar el disseny a diferents mides de pantalla.
- Aplicar tècniques de disseny mobile-first.
- Ajustar tipografia, imatges i altres elements per a una millor experiència d'usuari en dispositius mòbils.
- Importància del Disseny Responsiu
El disseny responsiu assegura que el teu lloc web ofereixi una experiència d'usuari òptima independentment del dispositiu utilitzat. Això inclou:
- Millor Experiència d'Usuari: Els usuaris poden navegar fàcilment pel lloc web sense haver de fer zoom o desplaçar-se horitzontalment.
- SEO: Els motors de cerca com Google prioritzen els llocs web responsius en els resultats de cerca.
- Accessibilitat: Un lloc web responsiu és més accessible per a persones amb discapacitats.
- Consultes de Mitjans (Media Queries)
Les consultes de mitjans permeten aplicar diferents estils CSS en funció de les característiques del dispositiu, com l'amplada de la pantalla. Aquí tens un exemple bàsic:
/* Estils per a dispositius d'escriptori */
body {
font-size: 16px;
}
/* Estils per a dispositius amb una amplada màxima de 768px (tauletes i mòbils) */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Estils per a dispositius amb una amplada màxima de 480px (mòbils) */
@media (max-width: 480px) {
body {
font-size: 12px;
}
}Explicació del Codi
- Estils per a dispositius d'escriptori: S'apliquen per defecte.
- @media (max-width: 768px): S'apliquen quan l'amplada de la pantalla és de 768px o menys.
- @media (max-width: 480px): S'apliquen quan l'amplada de la pantalla és de 480px o menys.
- Disseny Mobile-First
El disseny mobile-first implica començar el desenvolupament del lloc web per a dispositius mòbils i després adaptar-lo a pantalles més grans. Això assegura que el lloc web funcioni bé en dispositius mòbils, que són els més utilitzats.
Exemple de Disseny Mobile-First
/* Estils per a dispositius mòbils primer */
body {
font-size: 12px;
}
/* Estils per a dispositius amb una amplada mínima de 480px (tauletes) */
@media (min-width: 480px) {
body {
font-size: 14px;
}
}
/* Estils per a dispositius amb una amplada mínima de 768px (escriptori) */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}Explicació del Codi
- Estils per a dispositius mòbils: S'apliquen per defecte.
- @media (min-width: 480px): S'apliquen quan l'amplada de la pantalla és de 480px o més.
- @media (min-width: 768px): S'apliquen quan l'amplada de la pantalla és de 768px o més.
- Ajustar Tipografia i Imatges
Tipografia Responsiva
La tipografia ha de ser llegible en totes les mides de pantalla. Utilitza unitats relatives com em o rem per assegurar-te que la mida del text s'ajusti correctament.
body {
font-size: 1rem; /* 16px per defecte */
}
@media (max-width: 768px) {
body {
font-size: 0.875rem; /* 14px */
}
}
@media (max-width: 480px) {
body {
font-size: 0.75rem; /* 12px */
}
}Imatges Responsives
Les imatges han de ser flexibles i adaptar-se a la mida de la pantalla.
Explicació del Codi
- max-width: 100%; Assegura que la imatge no superi l'amplada del seu contenidor.
- height: auto; Manté la proporció de la imatge.
- Exemple Pràctic
HTML
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lloc Web Responsiu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Benvingut al Meu Lloc Web</h1>
</header>
<main>
<section>
<h2>Sobre Nosaltres</h2>
<p>Som una empresa dedicada a...</p>
<img src="imatge.jpg" alt="Imatge descriptiva">
</section>
</main>
<footer>
<p>© 2023 La Meva Empresa</p>
</footer>
</body>
</html>CSS
/* Estils per a dispositius mòbils primer */
body {
font-family: Arial, sans-serif;
font-size: 1rem;
margin: 0;
padding: 0;
}
header, main, footer {
padding: 1rem;
}
img {
max-width: 100%;
height: auto;
}
/* Estils per a dispositius amb una amplada mínima de 480px (tauletes) */
@media (min-width: 480px) {
body {
font-size: 1.125rem; /* 18px */
}
}
/* Estils per a dispositius amb una amplada mínima de 768px (escriptori) */
@media (min-width: 768px) {
body {
font-size: 1.25rem; /* 20px */
}
header, main, footer {
padding: 2rem;
}
}Exercici Pràctic
Tasca
- Crea un document HTML amb una estructura bàsica.
- Afegeix estils CSS per fer que el lloc web sigui responsiu utilitzant consultes de mitjans.
- Assegura't que la tipografia i les imatges s'ajustin correctament a diferents mides de pantalla.
Solució
HTML
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lloc Web Responsiu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Benvingut al Meu Lloc Web</h1>
</header>
<main>
<section>
<h2>Sobre Nosaltres</h2>
<p>Som una empresa dedicada a...</p>
<img src="imatge.jpg" alt="Imatge descriptiva">
</section>
</main>
<footer>
<p>© 2023 La Meva Empresa</p>
</footer>
</body>
</html>CSS
/* Estils per a dispositius mòbils primer */
body {
font-family: Arial, sans-serif;
font-size: 1rem;
margin: 0;
padding: 0;
}
header, main, footer {
padding: 1rem;
}
img {
max-width: 100%;
height: auto;
}
/* Estils per a dispositius amb una amplada mínima de 480px (tauletes) */
@media (min-width: 480px) {
body {
font-size: 1.125rem; /* 18px */
}
}
/* Estils per a dispositius amb una amplada mínima de 768px (escriptori) */
@media (min-width: 768px) {
body {
font-size: 1.25rem; /* 20px */
}
header, main, footer {
padding: 2rem;
}
}Conclusió
En aquesta secció, hem après com fer que un lloc web sigui responsiu utilitzant consultes de mitjans, tècniques de disseny mobile-first, i ajustant la tipografia i les imatges. Aquestes habilitats són essencials per crear llocs web moderns que ofereixin una experiència d'usuari òptima en qualsevol dispositiu. Ara estàs preparat per aplicar aquests conceptes al teu projecte i assegurar-te que el teu lloc web sigui accessible i fàcil d'usar per a tots els usuaris.
Domini del CSS: De Principiant a Avançat
Mòdul 1: Introducció al CSS
- Què és el CSS?
- Sintaxi i Selectors de CSS
- Com Afegir CSS a HTML
- Propietats Bàsiques de CSS
- Colors en CSS
- Unitats i Mesures en CSS
Mòdul 2: Estilització de Text i Fonts
- Propietats de Text
- Propietats de Fonts
- Integració de Google Fonts
- Alineació i Espaiat de Text
- Decoració i Transformació de Text
Mòdul 3: Model de Caixa i Disseny
- Comprendre el Model de Caixa
- Marge i Farciment
- Vora i Contorn
- Amplada i Alçada
- Dimensionament de Caixa
- Propietat de Visualització de CSS
Mòdul 4: Posicionament i Flotació
- Propietat de Posició de CSS
- Posicionament Estàtic, Relatiu, Absolut i Fix
- Flotació i Neteja de CSS
- Crear Dissenys amb Flotació
- Índex Z de CSS
Mòdul 5: Flexbox
- Introducció a Flexbox
- Propietats del Contenidor Flex
- Propietats dels Elements Flex
- Crear Dissenys amb Flexbox
- Disseny Responsiu amb Flexbox
Mòdul 6: CSS Grid
- Introducció a CSS Grid
- Propietats del Contenidor Grid
- Propietats dels Elements Grid
- Crear Dissenys amb CSS Grid
- Disseny Responsiu amb CSS Grid
Mòdul 7: Tècniques Avançades de CSS
Mòdul 8: Disseny Responsiu
- Introducció al Disseny Responsiu
- Consultes de Mitjans
- Tipografia Responsiva
- Imatges Responsives
- Disseny Mobile-First
Mòdul 9: Preprocessadors i Frameworks
- Introducció als Preprocessadors de CSS
- Conceptes Bàsics de Sass
- Conceptes Bàsics de Less
- Introducció als Frameworks de CSS
- Ús de Bootstrap
Mòdul 10: Millors Pràctiques i Optimització
- Millors Pràctiques de CSS
- Organització del Codi CSS
- Minificació de CSS
- Optimització del Rendiment de CSS
- Depuració de CSS