Usar css media queries

Podemos usar css media queries para detectar el espacio disponible en el navegador del cliente y así cambiar el tamaño de los elementos de nuestra página web (incluso podemos cambiar el tamaño de la letra, por ejemplo) dependiendo del tamaño disponible.

El fichero css será algo así:

@CHARSET "UTF-8";

/* valores por defecto */
.contenedor {
    width: 984px;
    margin: 0 auto;
    position: relative;
}
.header {
    width: 216px;
    position: absolute;
    left: 0px;
}
.nioos {
    margin: 0;
    font-size: 91px;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    line-height: 147px;
    text-align: center;
}
.subtitle {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 13px;
    line-height: 21px;
    text-align: center;
}
.principal {
    width: 728px;
    position: absolute;
    left: 256px;
}
#mapa {
    width: 100%;
    height: 450px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 21px;
}
.gs-newsResult {
    height: 168px;
}
.gs-publisher, .gs-publishedDate, .gs-clusterUrl {
    font-size: 11px;
    line-height: 17px;
}
.barra-busqueda {
    width: 100%;
    margin-bottom: 5px;
    position: relative;
}
#direccion {
    width: 645px;
}
.control {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 13px;
}
#buscando {
    position: absolute;
    left: 625px;
    top: 4px;
    visibility: hidden;
}
#placeAttr {
    width: 100%;
    height: 20px;
    font-family: Arial,sans-serif;
    font-size: 11px;
    text-align: right;
    padding-top: 2px;
}

/* valores para un ancho de navegador de entre 1365px y 1280px */
@media (max-width: 1365px) and (min-width: 1280px) {
    .contenedor {
        width: 1240px;
    }
    .header {
        width: 280px;
    }
    .nioos {
        font-size: 105px;
        line-height: 170px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 920px;
        left: 320px;
    }
    #mapa {
        height: 569px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 810px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 790px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1439px y 1366px */
@media (max-width: 1439px) and (min-width: 1366px) {
    .contenedor {
        width: 1324px;
    }
    .header {
        width: 301px;
    }
    .nioos {
        font-size: 105px;
        line-height: 170px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 983px;
        left: 341px;
    }
    #mapa {
        height: 608px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 870px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 850px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1679px y 1440px */
@media (max-width: 1679px) and (min-width: 1440px) {
    .contenedor {
        width: 1400px;
    }
    .header {
        width: 320px;
    }
    .nioos {
        font-size: 126px;
        line-height: 204px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 1040px;
        left: 360px;
    }
    #mapa {
        height: 643px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 900px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 880px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1919px y 1680px */
@media (max-width: 1919x) and (min-width: 1680px) {
    .contenedor {
        width: 1640px;
    }
    .header {
        width: 380px;
    }
    .nioos {
        font-size: 147px;
        line-height: 238px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 1220px;
        left: 420px;
    }
    #mapa {
        height: 754px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 1105px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 1085px;
        top: 7px;
    }
}

/* valores para un ancho de navegador mayores de 1920px */
@media (min-width: 1920px) {
    .contenedor {
        width: 1880px;
    }
    .header {
        width: 440px;
    }
    .nioos {
        font-size: 168px;
        line-height: 272px;
    }
    .subtitle {
        font-size: 42px;
        line-height: 68px;
    }
    .principal {
        width: 1400px;
        left: 480px;
    }
    #mapa {
        height: 865px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 1280px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 1260px;
        top: 7px;
    }
}

Para conocer cuales son las resoluciones más habituales, y así construir nuestro fichero css para las resoluciones que consideremos más importantes, podemos visitar las siguientes webs:

http://www.w3schools.com/browsers/browsers_display.asp
http://www.w3schools.com/browsers/browsers_resolution_higher.asp
http://gs.statcounter.com/
http://en.wikipedia.org/wiki/Display_resolution
http://www.screenresolution.org/

También hay que tener en cuenta que ciertos navegadores antiguos (como internet explorer 8 y versiones anteriores) no tienes soporte para media queries de css, por lo que deberemos indicar los valores por defecto del tamaño de los elementos de nuestra página web para estos browsers.