Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
12d
11h
43m
36s
Buenas para todos y bienvenidos a este tutorial para crear una pagina web con diseño responsivo
Primero ¿que es un diseño responsivo? Es un conjunto de herramientas para que tu sitio se vea bien indiferentemente de que medidas tenga la pantalla
Ahora lo que vamos a hacer es crear nuestro archivo HTML con un <div> que contenga un texto y un color
<!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>
<style>
div {
background: greenyellow;
}
</style>
</head>
<body>
<div>
Platzi
</div>
</body>
</html>
Ahora nuestro <div> es de color greenyellow y lo que vamos a hacer es que a partir de cierta medida de la pantalla el color pase a ser red
<style>
div {
background: greenyellow;
}
@media (min-width:500px) {
div {
background: red;
}
}
</style>
Lo que le dijimos aca, aplicando la media querie @media (min-width) es que desde 500px el color va a ser RED y menor a esos PX va a ser de color GREENYELLOW
De esta forma podemos tener un buen diseño de nuestra pagina web con el @media, muy sencillamente. Gracias por leer mi post!
