CSS básico responsive para tareas

Código HTML: base_tareas.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/css/base_tareas.css">
  <title>Base Responsive para tareas</title>
</head>
<body>
  <main>
    <!-- Aquí colocamos todo el contenido de la página web -->
  </main>
</body>
</html>

Código CSS: base_tareas.css


/* ###########################################
##   HOJA DE ESTILOS CSS: Tarea básica
##   (cc) 3con14 | ver.- 1.3
############################################## */

/* --- Reglas CSS para SMARTPHONE ------------ */

html { font: 16px/1.25 sans-serif; }

* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  outline    : none;
  transition : all 0.1s ease-in-out;
}

body {
  max-width  : 100vw;
  min-height : 100vh;
  background : tan;
  
  display         : flex;
  justify-content : center;
  align-items     : center;

  /* --- TIPOGRAFÍA responsive --- */
  font-size : calc(0.5em + 2.25vmin);
}

main {
  max-width  : 96vw;
  min-height : 96vh;
  width      : 1024px;
  margin     : 0 1em;
  background : rgba(0,0,0,0.1);
}


/* ################################################## */

/* --- IMAGEN, VIDEO local responsive --------------- */
img,video {
  max-width : 100%;
  height    : auto;
}
audio {
  display: block;
  margin : 0 auto;
}

/* --- VIDEO externo responsive --------------------- */
.media-box {
  position       : relative;
  overflow       : hidden;
  height         : 0;
  padding-bottom : 56.25%;
}
.media-box iframe,  
.media-box object,  
.media-box embed {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

/* ################################################## */

/* --- Reglas CSS para TABLET ----------------------- */

@media all and (min-width:768px) {

  body { 
    background-color: pink;
    font-size : calc(0.5em + 2vmin);
  }

}

/* --- Reglas CSS para DESKTOP ---------------------- */

@media all and (min-width:992px) {

  body {
    background-color:steelblue;
    font-size : calc(0.5em + 1.75vmin);
  }

}

/* ####################  E N D  ##################### */

Descargar el archivo comprimido: base_tareas, después seguir estos pasos:
1º.- Descomprimir el archivo base_tareas.rar
2º.- Hacer una copia de la carpeta extraida.
3º.- Cambiar el nombre del archivo .html y del archivo .css por el nombre de la tarea que estéis haciendo.

Etiquetas: CSS