Usando Media Queries

En los años que llevo escri­biendo en Rosa­po­lis siem­pre he dise­ñado y empleado mis pro­pios the­mes de Word­Press. Éste que tengo ahora creo que es el ter­cero que hago, y casi siem­pre me baso en alguno que esté ya hecho y lo adapto para hacerlo más ovino. Ahora mismo el que tengo está basado en Twenty­Ten Five, una adap­ta­ción a HTML5 del theme pre­de­ter­mi­nado de WordPress.

Modi­fi­car un theme es una tarea en la que soy tre­men­da­mente lenta, la hago a ratos suel­tos y me tiro una eter­ni­dad con cada pequeño cam­bio. Las deci­sio­nes no se me da bien y esco­ger entre dos tonos dis­tin­tos de gris para el fondo del pie del post o aña­dir 2px más de mar­gen se con­vier­ten en fas­ci­nan­tes, absor­ben­tes tareas. Con el de ahora cuando abrí de nuevo el blog toda­vía no había ter­mi­nado de arre­glar todo lo que que­ría pero como estaba viendo que si espe­raba a que estu­viese com­ple­ta­mente ter­mi­nado aca­ba­ría escri­biendo de nuevo en Rosa­po­lis en 2012, dejé unas cuan­tas cosas pen­dien­tes por hacer. Entre ellas estaba aña­dir media que­ries a la CSS para que Rosa­po­lis se siguiese viendo bonito en su ver­sión impresa, en un móvil, en mi nuevo iPad cor­te­sía de Tuenti… Y ahora que me he puesto a ello, me ha pare­cido buena idea docu­men­tar por aquí un par de cosi­llas que he des­cu­bierto, por si a alguien le sirve de algo (y de paso me gano unas cuan­tas visi­tas, que los tutoriales/post infor­ma­ti­vos como éste ven­den mucho).

Las media que­ries éstas son una exten­sión de CSS2 que per­mite defi­nir hojas de estilo espe­cí­fi­cas para dis­tin­tos dis­po­si­ti­vos o media, como screen, print… Ahora con CSS3 esta fun­cio­na­li­dad se ha exten­dido, per­mi­tiendo defi­nir con­di­cio­nes en cuanto al tamaño, la reso­lu­ción, el color… las carac­te­rís­ti­cas del dis­po­si­tivo, vamos. Así se puede espe­ci­fi­car mucho más qué reglas que­re­mos que se apli­quen y cuándo. Las media que­ries se pue­den usar tanto en la pro­pia hoja de estilo, usando @media. Así no tie­nes que car­gar dis­tin­tas CSS, lo pones todo en el mismo archivo y listo.

@media only screen and (max-width: 480px) { ... }

O tam­bién las pue­des usar den­tro del <head>, si lo que quie­res es car­gar hojas de estilo distintas:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

En esta demo se puede ver esto en acción (pro­bad a redi­men­sio­nar la ven­tana) y en media​queri​.es se dedi­can a reco­pi­lar pági­nas que usan media que­ries, la mayo­ría son una pasada de chulas.

Espe­ci­fi­cando el tamaño

Aquí tenéis una lista com­pleta de todas los aspec­tos que se pue­den con­tro­lar con media que­ries. En la prác­tica, si estáis usando esto para lo de las ver­sio­nes en pan­ta­llas de dis­tin­tos tama­ños, lo más nor­mal es que uséis sólo las rela­ti­vas a width:

@media screen and (max-width: 767px) { .. }
@media screen and (min-width: 768px) and (max-width: 1023px) { .. }
@media screen and (min-width: 1024px) { .. }

Una vez que sabía esto, escribí reglas CSS para dos ver­sio­nes más de la página: una más que nada para dis­po­si­ti­vos de 768px de ancho (tablets) y otra para móvi­les con 320px/480px de ancho. Otras pági­nas tie­nen ade­más ver­sión para net­books (1024px) pero como la mía usa sólo una columna y el foo­ter cabe tal cual en ese tamaño, no he con­si­de­rado que me hiciera falta.

Imá­ge­nes con tamaño flexible

Es tan sim­ple como aña­dir esta regla:

img {
    max-width: 100% !important;
}

De ese modo cuando las imá­ge­nes exce­dan las dimen­sio­nes del área visi­ble se redu­ci­rán hasta ocu­parla por com­pleto. max-width no se aplica a ele­men­tos inline, así que tal vez ten­gáis que aña­dir un display: block; por ahí. Ah, hacer esto no sig­ni­fica que este­mos opti­mi­zando la página para móvi­les. Para eso ten­dría­mos que redu­cir de ver­dad el tamaño de dichas imá­ge­nes, aun­que yo de momento me con­formo con que se vea bien y me parece per­fecto y reco­men­da­ble que la gente con­suma sus tari­fas de datos car­gando mis boni­tas imá­ge­nes :D

Mi HTC ignora las media queries

En cuanto estuve satis­fe­cha de cómo se veía al redi­men­sio­nar la ven­tana del nave­ga­dor hasta dejarla estre­chí­sima, lo pri­mero que hice fue coger el móvil para pro­barla en el medio ade­cuado. Me decep­cionó bas­tante com­pro­bar que mi móvil, un HTC Wild­fire con Android 2.2.1, igno­raba abso­lu­ta­mente todas las reglas que yo con tanto amor había escrito para él. Me puse a inves­ti­gar por ahí y esto es lo que final­mente lo resol­vió para mí:

Usar max-device-width en vez de max-width, ya que la segunda se refiere al tamaño del área de visión (el tamaño de la ven­tana del nave­ga­dor), mien­tras que el pri­mero se refiere a la reso­lu­ción real del dis­po­si­tivo. Las reglas que­da­rían algo así (la coma hace las veces de or y per­mite com­bi­nar varias con­di­cio­nes, como véis):

@media only screen and (max-width: 479px), screen and (max-device-width: 480px) { ... }
@media only screen and (max-device-width: 320px) { ... }

Y aña­dir esta meta tag en el head:

<meta name="viewport" content="width=device-width" />

Por cierto, en mi bús­queda tam­bién des­cu­brí que iOS, Bla­ck­be­rry y Android igno­ran por com­pleto @media handheld, apa­ren­te­mente es algo pasado de moda que sólo móvi­les anti­guos reconocen.

Evi­tar imá­ge­nes par­ti­das en modo impresión

Y ya lo último, para todos esos faná­ti­cos de Rosa­po­lis que nece­si­tan impri­mir mi blog para forrar las pare­des de su habi­ta­ción con él, el @media print. Aparte de ocul­tar cosas como el foo­ter, los enla­ces para comen­tar, algu­nas imá­ge­nes y poner colo­res algo mejo­res para el papel, sólo hay algo que puede ser rele­vante: las imá­ge­nes par­ti­das entre dos pági­nas:

Imagenes Partidas

Es dolo­roso a la vista, pero se puede solu­cio­nar así (tam­bién es útil para citas, tablas…):

img, pre, blockquote, tr {
	page-break-inside: avoid;
}

(Fire­fox 5.0.1 no parece sopor­tarlo, por cierto)

Y el resul­tado final

Hala, a cam­biar el tamaño de la ven­tana para verlo en directo.

Media Queries example

10 comentarios en Usando Media Queries

  1. José Francisco dice:

    Qué chu­lada. Justo ahora ando ‘luchando’ con CSS para remo­de­lar mi blog, así que voy a pro­bar. Eso de que cam­biando el ancho de la ven­tana el con­te­nido se adapte me ha enamo­rado (sobre todo por­que yo soy de usar el mínimo tamaño de las ven­tana del nave­ga­dor siem­pre que pueda).

  2. Gosku dice:

    Genial artículo. Yo tam­bién ando cam­biando el diseño de mi blog (me die­ron ganas al ver el tuyo, aun­que no creo que se quede ni la mitad de bien), a ver si así escribo más. No había pen­sado en la ver­sión móvil, y menos en la ver­sión tablet, así que ahora ya tengo más tra­bajo ^_^

  3. Banyú dice:

    Éste que tengo ahora creo que es el ter­cero que hago, y casi siem­pre me baso en alguno que esté ya hecho y lo adapto para hacerlo más ovino”

    ¿Qué sig­ni­fica ovino?

  4. Rosa dice:

    ovino, na.
    (Del lat. ovis, oveja).
    1. adj. Dicho del ganado: lanar.
    2. m. Ani­mal ovino.

    xD
    No es más que otra de mis estu­pi­de­ces. Las ove­jas tie­nen un gran pro­ta­go­nismo en todo lo que rodea a Rosa­po­lis. Los nom­bres de los the­mes que he hecho para mi blog son: “Dios es oveja”, “My patro­nus is a sheep” y “Twenty­Ten Five Sheeps and Fis­hes” (éste último).
    Creo que la oveja es el mejor animal.

  5. Banyú dice:

    Ah, ok ;)
    Soy un lec­tor rela­ti­va­mente nuevo en tu blog.
    Por cierto, aquí: “Usar max-device-width en vez de max-width, ya que el pri­mero se refiere al tamaño del área de visión (el tamaño de la ven­tana del nave­ga­dor), mien­tras que la segunda se refiere a la reso­lu­ción real del dis­po­si­tivo.“
    ¿Es tre­men­da­mente des­afor­tu­nada la nomen­cla­tura de las pro­pie­da­des o hay una errata en el post?

  6. Rosa dice:

    ¡Errata en el post!
    Gra­cias mil, ya está arre­glado :D

  7. Pingback: Implementación – Web del proyecto | /* Datos en abierto ~ */

  8. m16u dice:

    hola una con­sulta. diga­mos al momento de subir una ima­gen, hago 2 thumbnails..y para la ver­sion movil nece­sito la mas pequeña .. como mues­tro esa ima­gen„ no quiero redi­men­zio­nar como dice el articulo quiero ele­jir la otra ima­gen mas pequeña.. por supuesto que todo es dina­mico , es para un blog que hago..

  9. buen dice:

    Gra­cias! sigue publi­cando con ese humor

  10. ddsign dice:

    Qué bien expli­cado! Gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>