Como Usar Media Queries(CSS3) En Tus Webs

Con el aumento de pantallas muy grandes y dispositivos móviles, los desarrolladores web deben poder crear sitios web que se muestren correctamente y se vean bien, sea cual sea el dispositivo. Claro, puedes usar buenas técnicas antiguas como diseños fluidos, pero tengo algo mejor que mostrarte hoy. Este tutorial le enseñará cómo puede crear un diseño de sitio web adaptable utilizando CSS3.

Creando el diseño por defecto

El primer paso de este tutorial es, obviamente, crear una página HTML. Elegí hacer una página HTML5 simple con solo una imagen de encabezado, un título y algo de texto. Copie el siguiente código y péguelo en un archivo llamado index.html.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Tutoriales En Linea - Demostración de CSS3</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="description" content="Tutoriales En Linea es un sistemas instructivos de autoaprendizaje...">
<meta name="keywords" content="Tutoriales En Linea,html,CSS3,HTML25,Demostración de CSS3">
</head>
<div id="container">
<header class="ma-class-en-css">
<h1 id ="logo"><a href="#">Tutoriales En Linea</a></h1>
</header><div id="content">
<h2>Tutoriales En Linea</h2>
<p>Tutoriales En Linea pretende ser un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar una determinada actividad.
<p>
En la educación en línea, la función tutorial se caracteriza por la “relación orientadora de los docentes respecto de cada alumno en orden a la comprensión de los contenidos, interpretación de las descripciones procedimentales, el momento y la forma adecuados para la realización de trabajos, ejercicios o autoevaluaciones y en general para la aclaración puntual y personalizada de cualquier tipo de duda”. (Valverde Berrocoso, J. y Garrido Arroyo, Ma C., 2005, p. 154).</p>
<p>
Típicamente un sistema tutorial incluye cuatro grandes fases:</p>
<p>
<img src="desarrolladores-web_tutoriales_en_linea.webp"  alt="Tutoriales En Linea - Demostración de CSS3"/>
Fase introductoria: genera motivación y se centra la atención.
Fase de orientación inicial: se da la codificación, almacenaje y retención de lo aprendido.
Fase de aplicación: evocación y transferencia de lo aprendido.
Fase de retroalimentación: en la que se demuestra lo aprendido y se ofrece retroinformación y refuerzo (Galvis, 1992).</p>
<p>
Un tutorial normalmente consiste en una serie de pasos que van aumentando el nivel de dificultad y entendimiento. Por este motivo, es mejor seguir los tutoriales en su secuencia lógica para que el  entienda todos los componentes. </p>
<p>un cursillo es un curso breve sobre cualquier materia. </p>
<p>El término tutorial, muy de moda en los círculos informáticos, es un neologismo de origen inglés.</p>
<p>Aunque en los últimos tiempos y con la facilidad de las nuevas tecnologías, están apareciendo los video tutoriales los cuales son utilizados para e-learning de muchas academias en línea. Además existen webs totalmente gratuitas que ofrecen estos tutoriales en video...Acerca Del Autor...</p>
</div><!-- #content -->
<footer>Demostración Por: <a href="https://tutorialesenlinea.futbolgratis.org">Tutoriales En Linea</a></footer>
</div><!-- #container -->
<body>
</body>
</html

Una vez hecho esto, tenemos que agregar una hoja de estilo a nuestra index.html. El siguiente código es el estilo básico de la página. Pégalo en un archivo llamado style.css.

@charset "utf-8";
/* CSS Document */
*{
    /* Tutoriales En Linea - Demostración de CSS3< */
    margin:0;
    padding:0;  
}            
    
body{
    background:#f5f5f5;
    font-family:"Lucida Grande", Arial;
    font-size:medium;
    line-height:21px;
    color:#444;  
}     

p{
    margin:15px 0;
}              

h2{
    margin-top:20px;
}

#container{
    background:#fff;
    border-left:1px #ddd solid;
    border-right:1px #ddd solid;
    border-bottom:1px #ddd solid;
    width:600px;
    margin:0 auto;
}  

header h1#logo a{
    text-indent:-9999px;
    display:block;
    width:600px;
    height:182px;
    background:url(image-tl.webp) no-repeat 0 0;
}             

#content{
    width:95%;
    margin:0 auto;
}

footer{
    text-align:center;
    width:100%;
    display:block;    
    font-size:11px;
}  
img {
 max-width:100%;
}

En este momento, si mira su index.html a través de su navegador web, verá algo como la captura de pantalla a continuación. Nada espectacular, ¿verdad? Sigue leyendo, vamos a sumergirnos en la parte interesante.

Usando consultas de medios CSS3 para que nuestro diseño se ajuste a todas las resoluciones de pantalla

Si ha visto su index.html con una resolución de pantalla superior a 800 * 600, es posible que el diseño sea realmente pequeño. Entonces, ¿qué hay de permitir que las pantallas grandes muestren una versión más grande, mientras siguen usando la versión pequeña para personas con resoluciones más bajas?

Esto es lo que las consultas de medios CSS3 pueden hacer por usted. Abra su style.css y pegue el siguiente código al final del archivo:

@media screen and (min-width:1200px){
    #container{
        width:1100px;
    }  
    
    header h1#logo a{
        width:1100px;
        height:150px;
        background:url(image-tl.webp) no-repeat 0 0;
    }                          
    
}

Ahora, eche un vistazo de index.html: el diseño es realmente más grande. Redimensionar horizontalmente el tamaño de la ventana ... El sitio cambia de nuevo al diseño pequeño. ¿Qué tan bueno es eso?

Como puede ver, no hay nada complicado en la implementación de esta técnica. @media screen le dice al navegador que esto se aplica solo a las pantallas, porque no queremos cambiar el tamaño de nada para imprimir. Y and (min-width:1200px)especifica que la pantalla debe tener un ancho mínimo de 1200px. Si se cumplen estos requisitos, el navegador tiene en cuenta el código entre paréntesis y redefine los estilos anteriores.

Ahora que creamos una versión más grande para pantallas más grandes, ¿qué pasa con una versión muy pequeña para móviles? Pega este código style.css y listo.

@media screen and (max-width:767px){
    #container{
        width:320px;
    } 
    
    header h1#logo a{
        width:320px;
        height:64px;
        background:url(image-tl-small.webp) no-repeat 0 0;
    }                           
    
}

Tratar con imagenes

Las imágenes siempre juegan un papel importante en un sitio web. Entonces, agreguemos una imagen a nuestro diseño de sitio web. Vuelva a abrir index.html e inserte el siguiente código justo antes del primer cierre</p> o donde lo prefieras.

<img src="desarrolladores-web_tutoriales_en_linea.webp"  alt="Tutoriales En Linea - Demostración de CSS3"/>

Si tienes una mirada index.html con una pantalla grande, no hay problema. Pero si redimensionas la ventana horizontalmente. Veras que la imagen no se adapta al tamaño de la pantalla.

La solución a ese problema es bastante simple: al cambiar el tamaño del diseño del sitio web, también tenemos que cambiar el tamaño de las imágenes. La propiedad CSS max-width está aquí para ayudar.

Inserte lo siguiente en su style.css:

img {
    max-width:100%;
    margin:10px 0;
}

Opcional

Ahora se define un tamaño de imagen predeterminado. Ahora podemos configurar tamaños para pantallas grandes y dispositivos móviles:

@media screen and (min-width:1200px){
    img {
        max-width:1000px;
    }
}

@media screen and (max-width:767px){  
    img {
        max-width:305px;
    } 
}

Ahora, cambia el tamaño de tu navegador: ¡Las imágenes se redimensionar con el diseño!

Espero que hayan disfrutado este tutorial. ¡Que tengas un gran día!

Ver Resultado