Lo que es sensible Diseño Web alias RWD?

aprender: cómo hacer una página web sensible ? En este artículo vamos a aprender a hacer diseño web sensible.

Como diseñador web, usted debe haber encontrado con este término revolucionario, al diseño web . Diseño web adaptable o RWD es una técnica que permite una única página web para adaptarse class diferentes tamaños de pantallas sin tener al usuario desplazarse hacia los lados .

El término fue acuñado por Ethan Marcotte en su blog ( al diseño web ) que describe cómo un único sitio web en sí puede cambiar para adaptarse adecuadamente en diferentes pantallas. Su puesto fue apreciado por otros diseñadores y le dio el crédito del diseño de respuesta.

¿Cómo funciona?

El diseño de respuesta es una capa adicional de CSS sobre la parte superior de HTML que define algunas reglas for un elemento. Cuando el tamaño de la pantalla llega a la anchura definida, el navegador automáticamente fuerzas para cargar el CSS define for esos valores.

¿Cómo sabe el navegador cuándo hay que cambiar?

Cuando escribimos el código en el CSS, lo damos algunos valores for la que va a actuar responsablemente. Los tamaños de ancho de la pantalla común son 1024px de, 768px, 420px.

Estos son fáciles de for, de 1024px y por encima de los escritorios son break, 768px y por encima de las tabletas for e inferior a 420px for pantalla del móvil.

Consultas de medios

El código de CSS que estábamos hablando de que se conoce como preguntas de los medios. Lo que usted escribe en el interior de estas preguntas de los medios, se carga en los elementos seleccionados.

body {
background: #3e4;
}
@media (max-width: 768px) {
body {
background: #f56;
}
}

consultas significa Aquí @media medios de comunicación y max-anchura es 768px. Esto significa que si el tamaño de la pantalla es menor o igual a 768px sólo entonces este código será mostrado. Aquí estamos el estilo del cuerpo for un ejemplo.

En primer lugar vamos a dar un estilo normal al cuerpo, y luego consulta de medios en el interior, que se aplicará un estilo diferente. Vea una demostración de trabajo a continuación.

He aquí una demostración:

DEMO

HTML con CSS del archivo de demostración:

<html>
<head>
<title>Responsive Design</title>
<style>
body {
background: #3e4;
}
@media (max-width: 768px) {
body {
background: #f56;
}
}
</style>
</head>
<body>
<p>Shrink/Resize your Browser!</p>
</body>
</html>

esperanza que siguió con este artículo también. Si tiene alguna pregunta relacionada con tracción trasera, háganoslo saber en los comentarios.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *