Ejemplo de Media Queries

HTML


<div class="contenedor">
    <header>
        <h1>EJEMPLO DE USO DE MEDIA QUERIES</h1>
        <nav class="menu">
            <ul>
                <li class="item-menu"><a href="#">Elemento 1</a></li>
                <li class="item-menu"><a href="#">Elemento 2</a></li>
                <li class="item-menu"><a href="#">Elemento 3</a></li>
                <li class="item-menu"><a href="#">Elemento 4</a></li>
                <li class="item-menu"><a href="#">Elemento 5</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <aside class="lateral"></aside>
        <section id="bloque_1" class="bloque"></section>
        <section id="bloque_2" class="bloque"></section>
    </main>
    <footer class="pie">
        <div class="col-pie"></div>
        <div class="col-pie"></div>
        <div class="col-pie"></div>
    </footer>
</div>
Ver CSS