Responsive design: media queries

¿Cómo haces que nuestra aplicación o pagina web se vea bien en distintos dispositivo o plataformas de tamaños diferentes?
¿Qué es Mobile First/Only?
¿Como funciona las hojas CSS en el RESPONSVE DESGIN?

Pagina de medidas para Responsive
Lo más importante es diseñar para movil.
Por lo que se debe diseñar con mobile first.
Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.
Para aplicar media queries con buenas prácticas, hay que hacerlo en el header.
Porque así solo se descarga el código necesario según el dispositivo, mientras que en CSS se descarga todo sin importar nada.
En la tag link se colocan los atributos href, rel y, a partir del segundo archivo, el break point media="screen and (min-width: #px".
El style.css debe estar hecho para mobile. Luego se pueden crear otros archivos como tablet.css o desktop.css.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main>
      <picture>
        <source media="(min-width:1300px)" srcset="./imgs/large.jpg" />
        <source media="(min-width:1000px)" srcset="./imgs/medium.jpg" />
        <img src="./imgs/small.jpg" alt="Esuna imágen de ejemplo" />
      </picture>
    </main>
  </body>
</html>

img {
  width: 100%;
}