In learning code: responsive design

Mostrando entradas con la etiqueta responsive design. Mostrar todas las entradas

lunes, 23 de marzo de 2020

Diseño responsivo con CSS

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

<!DOCTYPE html>
<html>
   <head>
      <title>Título de la página</title>
      <!-- METATAGS, archivos externos, etc. -->
   </head>
   <body>
      Contenido de la página
   </body>
</html>

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

* {box-sizing: border-box;}
body {
 margin: 0;
 padding: 0;
 width: 100%;
}
.fila {margin: 0 auto;}
.fila::after {
 content: "";
 clear: both;
 display: table;
}
[class*="col-"] {
 width: 100%;
 float: left;
}
html {font-size: 16px;}
.fila {width: 80%;}
[class*="col-"] {padding: 1rem;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

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

<!DOCTYPE html>
<html>
   <head>
      <title>Inlearning Code - Responsive</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Archivo CSS -->
      <link href="css/estructura.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <header class="fila">
         <div class="col-10" style="background-color: #b4e3cc;">COL 10</div>
         <div class="col-2" style="background-color: #ff5733;">COL 2</div>
      </header>
      <div class="fila">
         <div class="col-4" style="background-color: #decd3e;">COL 4</div>
         <div class="col-4" style="background-color: #a4e57c;">COL 4</div>
         <div class="col-4" style="background-color: #dfc80c;">COL 4</div>
      </div>
      <footer class="fila">
         <div class="col-12" style="background-color: #ffa200;">COL 12</div>
      </footer>
   </body>
</html>

El resultado sería:

Diseño responsivo usando reglas AT

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

<!DOCTYPE html>
<html>
   <head>
      <title>Título de la página</title>
      <!-- METATAGS, archivos externos, etc. -->
   </head>
   <body>
      Contenido de la página
   </body>
</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:

* {box-sizing: border-box;}

body {
 margin: 0;
 padding: 0;
 width: 100%;
}

.fila {margin: 0 auto;}

.fila::after {
 content: "";
 clear: both;
 display: table;
}

[class*="col-"], [class*="col-m-"], [class*="col-s-"] {
 width: 100%;
 float: left;
}

@media only screen and (min-width: 1px) {
 html {font-size: 12px;}
 [class*="col-s-"] {padding: 0rem;}
 .col-s-1 {width: 8.33%;}
 .col-s-2 {width: 16.66%;}
 .col-s-3 {width: 25%;}
 .col-s-4 {width: 33.33%;}
 .col-s-5 {width: 41.66%;}
 .col-s-6 {width: 50%;}
 .col-s-7 {width: 58.33%;}
 .col-s-8 {width: 66.66%;}
 .col-s-9 {width: 75%;}
 .col-s-10 {width: 83.33%;}
 .col-s-11 {width: 91.66%;}
 .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 512px) {
 html {font-size: 14px;}
 .fila {width: 90%; }
 [class*="col-m-"] {padding: 0.5rem;}
 .col-m-1 {width: 8.33%;}
 .col-m-2 {width: 16.66%;}
 .col-m-3 {width: 25%;}
 .col-m-4 {width: 33.33%;}
 .col-m-5 {width: 41.66%;}
 .col-m-6 {width: 50%;}
 .col-m-7 {width: 58.33%;}
 .col-m-8 {width: 66.66%;}
 .col-m-9 {width: 75%;}
 .col-m-10 {width: 83.33%;}
 .col-m-11 {width: 91.66%;}
 .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 700px) {
 html {font-size: 16px;}
 .fila {width: 80%;}
 [class*="col-"] {padding: 1rem;}
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}
}

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:

<!DOCTYPE html>
<html>
   <head>
      <title>Inlearning Code - Responsive</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Archivo CSS -->
      <link href="css/estructura.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <header class="fila">
         <div class="col-10 col-m-8 col-s-6" style="background-color: #b4e3cc;">COL 10</div>
         <div class="col-2 col-m-4 col-s-6" style="background-color: #ff5733;">COL 2</div>
      </header>
      <div class="fila">
         <div class="col-4 col-m-3 col-s-12" style="background-color: #decd3e;">COL 4</div>
         <div class="col-4 col-m-6 col-s-12" style="background-color: #a4e57c;">COL 4</div>
         <div class="col-4 col-m-3 col-s-12" style="background-color: #dfc80c;">COL 4</div>
      </div>
      <footer class="fila">
         <div class="col-12 col-m-12 col-s-12" style="background-color: #ffa200;">COL 12</div>
      </footer>
   </body>
</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:

miércoles, 22 de mayo de 2019

Creación de un Menú con responsive design usando HTML + CSS + JS

Se empleará la librería de JQuery para generar el siguiente menú responsivo:

Código HTML

Se construye un menú con los diversos elementos de HTML como "nav", "ul" y "li".

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="author" content="Jhon Paul">
   <title>Menú</title>
   <!-- CSS -->
   <link rel="stylesheet" href="menu.css">
   <!-- JS -->
   <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
   </script>
   <script src="menu.js"></script> 
 </head>
 <body style="font-family: calibri, arial;">
   <div class="menu">
 <div class="menu_bar">
            <a href="#" style="color: white;">Menu</a>
        </div>
 <nav class="menu" style="margin: 0 auto;" >
     <ul>
  <li class="menu"><a href="#">Menu 01</a>
  </li><li class="menu">
   <a href="#">Menu 02</a>
   <ul class="submenu">                                    
     <li><a href="#">Submenu 02.01</a></li>
     <li><a href="#">Submenu 02.02</a></li>
     <li><a href="#">Submenu 02.03</a></li>
                               </ul>
  </li><li class="menu">
   <a href="#">Menu 03</a>
   <ul class="submenu">        
     <li><a href="#">Submenu 03.01</a></li>
     <li><a href="#">Submenu 03.02</a></li>                                    
   </ul>
  </li><li class="menu">
   <a href="#">Menu 04</a>
   <ul class="submenu">
     <li><a href="#">Submenu 04.01</a></li> 
   </ul>    
  </li>    
     </ul>
 </nav>
  </div>
 </body>
</html>

Código CSS

Se añade reglas AT para controlar los redimensionamientos de la pantalla

a{text-decoration: none;}
@media only screen and (min-width: 1px){
    .menu_bar {
        display:block;
        text-align: right;
    }
 
 .menu_bar a {
  background:#000000;
        padding: 0.7rem;
 }
  
    nav.menu {
        width: 100%;
    }
 
    nav.menu ul li {
        display: block;
        border-bottom:1px solid white;
    }

    nav.menu ul li a {
        display: block;
        font-size: 1rem;
        position: relative;
        color: white;
        box-sizing: border-box;
        background:black;
        padding: 0.5rem 0;
    }

    .submenu {
        display: none;
    }

    nav.menu ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }
}

@media only screen and (min-width: 460px){   
    nav.menu ul li a {
        font-size: 1.2rem;
        padding: 0.8rem 0;
    }
}

@media only screen and (min-width: 768px){
    .menu_bar {
        display:none;
    }
    nav.menu{
        display: initial;
    }
    nav.menu ul li:hover .submenu {
        display:block;
    }

nav.menu {
 display: block;
 margin: 0;
 padding: 0;
 list-style: none;
}
 nav.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
 }

 nav.menu > ul > li {
  float: left;
 }
 
     nav.menu ul li a {
                display: block;
  margin: 0;
  padding: 15px 20px;
  color: #FFFFFF;
  background-color: #333333;
            }
 
     nav.menu > ul > li > ul {
  display: none;
     }

     nav.menu > ul > li:hover > ul {
  list-style: none;
  display: block;
  position: absolute;
     }
 
     nav.menu a:hover {
  background-color: #C80000;
            } 
}

Código JS

Finalmente, código JS para controlar el despliegue del menú en pantallas pequeñas.

$(document).ready(function () {
    $('.menu_bar').click(function () {
        $('nav.menu').slideToggle();
    });
    $(window).resize(function () {
        if (eval($('body').width()) > 750) {
            $('nav.menu').show();
        }else{
            $('nav.menu').hide();
        }
    });
});

Páginas