<!-- Hoja CSS vinculada a HTML mediante Mediaquery -->
<link rel="stylesheet" media="(max-width: 600px)" href="example.css" />

<!-- CSS aplicable a resoluciones mayores de X -->
@media (min-width: 1000px) {
  #logo {
    display: none;
  }
}
<!-- CSS aplicable a resoluciones de X a Y-->
@media (max-width: 1000px) and (min-width: 600px) {
  #logo {
    display: none;
  }
}
<!-- CSS aplicable a resoluciones menores de X -->
@media (max-width: 600px) {
  #logo {
    display: none;
  }
}

Mas info:
https://developer.mozilla.org/es/docs/CSS/Media_queries
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Media query para iphone:
http://stephen.io/mediaqueries/

Ejemplo de select (para usar con mediaquery):

<select onchange="window.open(this.options[this.selectedIndex].value,'_self')">
       <option value="quienes_somos.html">Quienes somos</option>
       <option value="que_hacemos.html">Que hacemos</option>
       <option value="productos.html">Productos</option>
       <option value="servicios.html">Servicios</option>
       <option value="contacto.html">Contacto</option>
</select>

Para despues poder hacer en la hoja de estilos:

select{
    display:none;
}
@media (max-width: 900px) {
    nav {
        /* ocultar el menu de navegacion */
        display: none;
    }
    select{
        display:block;
    }
}