Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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>
0
Puntos
3656
Visitas
0
Resp
Por prozona hace 110 meses
Experto
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate