lunes, 23 de marzo de 2020

Diseño responsivo usando reglas AT

La estructura básica de una página web con HTML5 es:

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Título de la página</title>
  5.       <!-- METATAGS, archivos externos, etc. -->
  6.    </head>
  7.    <body>
  8.       Contenido de la página
  9.    </body>
  10. </html>

Para implementar un diseño responsivo mediante reglas AT debemos agregar un archivo CSS, que llamaremos estructura.css, se ubicará dentro de una carpeta css y su código es:

  1. * {box-sizing: border-box;}
  3. body {
  4.  margin: 0;
  5.  padding: 0;
  6.  width: 100%;
  7. }
  9. .fila {margin: 0 auto;}
  11. .fila::after {
  12.  content: "";
  13.  clear: both;
  14.  display: table;
  15. }
  17. [class*="col-"], [class*="col-m-"], [class*="col-s-"] {
  18.  width: 100%;
  19.  float: left;
  20. }
  22. @media only screen and (min-width: 1px) {
  23.  html {font-size: 12px;}
  24.  [class*="col-s-"] {padding: 0rem;}
  25.  .col-s-1 {width: 8.33%;}
  26.  .col-s-2 {width: 16.66%;}
  27.  .col-s-3 {width: 25%;}
  28.  .col-s-4 {width: 33.33%;}
  29.  .col-s-5 {width: 41.66%;}
  30.  .col-s-6 {width: 50%;}
  31.  .col-s-7 {width: 58.33%;}
  32.  .col-s-8 {width: 66.66%;}
  33.  .col-s-9 {width: 75%;}
  34.  .col-s-10 {width: 83.33%;}
  35.  .col-s-11 {width: 91.66%;}
  36.  .col-s-12 {width: 100%;}
  37. }
  39. @media only screen and (min-width: 512px) {
  40.  html {font-size: 14px;}
  41.  .fila {width: 90%; }
  42.  [class*="col-m-"] {padding: 0.5rem;}
  43.  .col-m-1 {width: 8.33%;}
  44.  .col-m-2 {width: 16.66%;}
  45.  .col-m-3 {width: 25%;}
  46.  .col-m-4 {width: 33.33%;}
  47.  .col-m-5 {width: 41.66%;}
  48.  .col-m-6 {width: 50%;}
  49.  .col-m-7 {width: 58.33%;}
  50.  .col-m-8 {width: 66.66%;}
  51.  .col-m-9 {width: 75%;}
  52.  .col-m-10 {width: 83.33%;}
  53.  .col-m-11 {width: 91.66%;}
  54.  .col-m-12 {width: 100%;}
  55. }
  57. @media only screen and (min-width: 700px) {
  58.  html {font-size: 16px;}
  59.  .fila {width: 80%;}
  60.  [class*="col-"] {padding: 1rem;}
  61.  .col-1 {width: 8.33%;}
  62.  .col-2 {width: 16.66%;}
  63.  .col-3 {width: 25%;}
  64.  .col-4 {width: 33.33%;}
  65.  .col-5 {width: 41.66%;}
  66.  .col-6 {width: 50%;}
  67.  .col-7 {width: 58.33%;}
  68.  .col-8 {width: 66.66%;}
  69.  .col-9 {width: 75%;}
  70.  .col-10 {width: 83.33%;}
  71.  .col-11 {width: 91.66%;}
  72.  .col-12 {width: 100%;}
  73. }

Lo que nos interesa es la sintaxis:
  
@media only screen and (min-width: /*tamaño de la pantalla*/)

El archivo para probar si nuestra página funciona sería el archivo index.html:

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Inlearning Code - Responsive</title>
  5.       <meta charset="UTF-8">
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.       <!-- Archivo CSS -->
  8.       <link href="css/estructura.css" rel="stylesheet" type="text/css" />
  9.    </head>
  10.    <body>
  11.       <header class="fila">
  12.          <div class="col-10 col-m-8 col-s-6" style="background-color: #b4e3cc;">COL 10</div>
  13.          <div class="col-2 col-m-4 col-s-6" style="background-color: #ff5733;">COL 2</div>
  14.       </header>
  15.       <div class="fila">
  16.          <div class="col-4 col-m-3 col-s-12" style="background-color: #decd3e;">COL 4</div>
  17.          <div class="col-4 col-m-6 col-s-12" style="background-color: #a4e57c;">COL 4</div>
  18.          <div class="col-4 col-m-3 col-s-12" style="background-color: #dfc80c;">COL 4</div>
  19.       </div>
  20.       <footer class="fila">
  21.          <div class="col-12 col-m-12 col-s-12" style="background-color: #ffa200;">COL 12</div>
  22.       </footer>
  23.    </body>
  24. </html>

El resultado sería cuando la pantalla tiene de 700px a más :


El resultado sería cuando la pantalla va desde los 512px hasta menos de 700px:


El resultado sería cuando la pantalla es menor de 512px:


Publicado por en
Etiquetas: , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)