lvsistemas: Adaptar Web a Moviles CSS Responsive

Ejemplo Responsive partiendo del movil:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Document</title>
<link href="css/style.css" rel="stylesheet"
</head>

CSS:

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.top-bar{
   width: 100%;
   height: 60px;
   background-color: #ccc;
}

p{
   font-size: 30px;
}

/*El max-width debe ser ordenado de menor px a mayor px segun el selector*/

@media screen and (min-width:1024px) {
   p{
       font-size: 12px;
   }
}

@media screen and (min-width:640px) {
   .top-bar{
       background-color: #ff0;
   }
}

.adv{
   max-width: 1024px;
   min-height: 30px;
   background-color: #999;
   margin: 40px auto 0 auto;
}

@media screen and (min-width:1240px) {
   .adv{
       width: 1240px;
       background-color: #333;
   }
}

.tel{
display: none; /*ocultar*/
}

@media screen and (min-width:960px) {
   .tel{
       display: block; /*mostrar*/
   }
}

Ejemplo Responsive partiendo del desktop:

HTML:

<!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>Document</title>
   <link href="css/style.css" rel="stylesheet"
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS:

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.box{
   width: 100%;
   height: 30px;
   background-color: #ccc;
}

/*El max-width debe ser ordenado de mayor px a menor px*/

@media screen and (max-width:1024px){
   .box{
       background-color: #ff0;
       margin-top: 100px;
   }
}

@media screen and (max-width:960px){
   .box{
       background-color: #f00;
       margin-top: 10px;
   }
}

Páginas

Adaptar Web a Moviles CSS Responsive

No hay comentarios:

Publicar un comentario