Medias Querys CSS

Controlar los elementos html de una página web en pantallas de diferentes tamaños es fácil implementarlos con medias querys

¿QUE ES UN MEDIA QUERY?

Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo. Añadido en CSS3, las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

"Responsive Design" (Diseño Responsivo) es la estrategia para hacer que un sitio "responda" al navegador y dispositivo en el que se muestra... haciendo que se vea increible pase lo que pase.

Los media queries son la herramienta más poderosa para hacer esto. Tomemos la estructura donde usamos porcentajes y transformémosla en una columna cuando la ventana del navegador es muy pequeña para mantener el menú en la barra lateral:

EJEMPLO DE CODIGO CSS Y HTML

estilos.css

body{
	background: green;
	text-align: center;
	color:white;
}

.btn {
    background: orange;
    border: 1px solid orangered;
    padding: 10px 30px;
    box-shadow: 0px 0px 10px black;
    border-radius: 5px;
    color: white;
    text-decoration: none;
}
.btn:hover{
	background: yellow;
	color: orangered
}

/*creamos el media query para pantallas menos de 768px*/
@media only screen and (max-width: 768px){
	body{
		background: yellow;				
	}
	h1{
		display: none;
	}
	.btn {
		display: block;		
	}
}

Veamos como los implementamos en nuestra web

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">    
	<title>EJEMPLO DE CSS MEDIA QUERY</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<H1>HOLA</H1>
	<a href="" class="btn">LINK</a>
</body>
</html>

 

VIDEO Cómo crear medias queries en CSS3 Responsive Design

Código fuente completo de Medias Querys CSS

DESCARGAR

Visitas: 99 | Publicado:2018-11-16 17:03:56

Publicaciones que te pueden interesar

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::