¿Que son mediaquerys?

josejump06 · #1 (**permalink**) 20/02/2015, 06:39

Hola estoy haciendo una web para un proyecto de 2º-SMR pero tengo una duda este es mi codigo en HTML5 para que se haga responsive:

Código HTML:

<head>

    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></meta>
    <link href="css/Champion League.css" type="text/css" rel="stylesheet"></link>
    <link href="css/Champion League_tablet.css" media="only screen and (max-width: 1030px)" rel="stylesheet"></link>
    <link href="css/Champion League_smarthphone.css" media="only screen and (max-width: 600px)" rel="stylesheet"></link>
    <link href="css/Champion League_smarthphone420.css" media="only screen and (max-width: 485px)" rel="stylesheet"></link>
    <meta content="width=device, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport"></meta>
    <title></title>
    <link href="./imagenes/logo.gif" type="image/img" rel="icon"></link>

</head>

Pero ahora estoy escuchando por ahí y algo he leido por aqui que necesito mediaquerys en el CSS pero a mi el rsponsive me funciona con esto.

¿Esta mal lo mio?¿Debo poner algo en CSS?

Gracias

GeekGirl · #2 (**permalink**) 20/02/2015, 07:59

El meta tag viewport funciona bastante bien. El problema con esto es que tenés el atributo "user-scalable" en no, lo que va a hacer que el usuario no pueda dar zoom a tu aplicación.
Si estás construyendo para visualizar en dispositivos móviles, es muy incómodo no poder zoomear para acceder a determinadas funcionalidades.

Además un display para web no necesariamente va a funcionar para mobile donde generalmente se hacen los botones más grandes, se muestran textos más cortos y se usan imágenes más livianas.

Los media queries se usan generalmente para definir distintos estilos según la resolución en la que se ejecute el sitio.

Te dejo un link con información detallada: https://developer.mozilla.org/es/docs/CSS/Media_queries

Saludos