Tutorial de diseño responsivo

6933

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<title>Tutorial de diseño responsivo</title>
<style>
* {
background: bisque;
}

  h1 {
    color: grey;
  }


  div{
    background : purple;
    color: aliceblue;
   padding: 2px;
  }

  @media (min-width: 500px) { /* desde*/
    .phone{
      display: none;
    }
  }

  @media (max-width: 500px) { /* desde*/
    .pc{
      display: none;
    }
  }

  html{
    font-size: 100%;/*62.5%; /* se trasforna en porecentaje el
     tamaño de la fuente, para que los rem este en funsion 
     al porcentaje 100% -> 16 entonces 1000/16 = 62.6*/ 
  margin: 0;
  }

 
</style>

</head>

<body>
<h1>Responsive design</h1>
<p>Un diseño responsivo es aquel que toma en cuenta la presentacion de los elementos en las distintas tamaños de pantalla que puede desplegarse el codigo html</p>
<p>Para lograr eso se usa programacion de CSS y el uso de los componentes @media</p>

<div class="pc">Este div se muesta en una pantalla de pc con el uso de @media max-width: 500px</div>
<br>
<div class="phone">Este div se muesta en smartphone con el uso de @media min-width: 500px</div>

</body>
</html>

hace 2 años