CSS3 y Responsive: Definir distintos tipos de estilos para versión web o móvil, utilizando Media Query

Cuando uno está generando páginas web con diseño adaptativo o Responsive Design, tiene que tener en cuenta que además de reorganizarse según la pantalla donde se exhiba, también algunos elementos cambiarán de estilo. Por ejemplo, se puede querer que los elementos definidos en un menú <nav> </nav> sean de una determinada manera si la web está siendo vista en su versión web, pero queremos hacer botones mas definidos, si la estamos viendo en un móvil.

¿Cómo definir distintos estilos según el tamaño de la pantalla?

En el archivo Header.php , agregaremos la siguiente instrucción:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Agregaremos al final de nuestra hoja de estilos, style.css las siguientes líneas que corresponden a las media queries, agregando líneas o inclusive se puede adjuntar hojas de estilos separadas, por cada tamaño.

Las Media Queries consisten de un media type y  una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Yo por ejemplo, agregué una media query, en caso que mi sitio web, se estuviera viendo en pantallas pequeñas, con lo que obtengo que el menú se vea de forma muy diferente:

@media (max-width: 960px) 
{
header nav ul li a:hover {
 color:#000000;
}
 nav ul li {
 background: #FF0000;
 }
 
 nav select { display: inline-block; } /*= Force dropdown navigation to get displayed on mobile devices and ipad = */
}

y así pueden ir añadiéndose distintos media queries, según los distintos tamaños y agregando la programación correspondiente a los objetos, en este caso, los botones de mi menú de navegación:

/* For mobile : like samsung grand(480 * 800): */
@media screen and (max-width : 480px){}


/* For iphone: */
@media screen and (max-width : 320px){} 


/* For ipad: */
@media screen and (max-width : 768px){} 

Enlace | CSS3 Media Queries