Pagina web adaptable a dispositivos móviles

En este caso veremos como hacer una pagina en html adaptable a todo tipo de pantallas, utilizare un ejemplo muy básico para que veas lo sencillo que es esto utilizando las propiedades media screen.

Voy a dejar una pequeña demo de lo que voy a explicar lo que tienes que hacer es recalar el navegador y ver como va cambiado de tamaño, color de fondo etcétera.

Lo que tienes que hacer es meter dentro de cada tamaño las propiedades que quieras aquí tienes una demo de la funcionalidad.
Demo: pagina adaptable

Ahora mira el código css:

body {
    margin:0;
    }
@media screen and (min-width: 200px) {
    .pagina {
    width: 200px;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
}
}
@media screen and (min-width: 600px) {
    .pagina {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background-color: #0F9;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
}
}
@media screen and (min-width: 960px) {
    .pagina {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #09F;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
}
}

También dejo el código completo incluyendo el html por si te lias un poco:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo pagina adaptable</title>
<style type="text/css">
body {
    margin:0;
    }
@media screen and (min-width: 200px) {
    .pagina {
    width: 200px;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
}
}
@media screen and (min-width: 600px) {
    .pagina {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background-color: #0F9;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
}
}
@media screen and (min-width: 960px) {
    .pagina {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #09F;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
}
}
</style>
</head>
 
<body>
<div class="pagina">Ejemplo pagina adaptable</div>
</body>
</html>

Editado

0
Puntos

3648
Visitas

0
Resp

Por prozona hace 10 años

Master