Duda en CSS

lobogris · 26 Mar 2013

Hola, estoy modificando un template (en píxeles) porque era demasiado estrecho para mi gusto, pero algo que ya sabía es que para pantallas pequeñas (de 12" o menos) no iba a ser compatible, sobre todo porque el header es fijo.

Entonces necesito hacer de alguna manera o bien que al entrar en la web reconozca tu resolución de pantalla y te dirija a un style u a otro o bien un botón que cambie el ancho de la web.

¿Hay alguna manera respaldada, o que no sea del todo muy difícil?

Saludos :mola:

Julio Rodríguez · 26 Mar 2013

media querys

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website | Smashing Mobile

esta web es una pasada, vete haciendola pequeña encogiendo el navegador y veras cuantos cambios

lobogris · 26 Mar 2013

wsoulrc dijo:
media querys

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website | Smashing Mobile

esta web es una pasada, vete haciendola pequeña encogiendo el navegador y veras cuantos cambios

Gracias por la info! Ya veo más o menos como es aunque fácil no lo veo

al menos lo intentaré

En cuanto a la web veo que al darle a control+scroll se alinea a la izquierda, ¿a eso te refieres?

Julio Rodríguez · 26 Mar 2013

no, minima el navegador no cambies el zoom xDD

Konorz · 26 Mar 2013

Buenas,

Deberías crear un fichero diferente según el dispositivo desde el que accedes:

<link rel="stylesheet" href="style_mobile.css" media="handheld">

Tiene trabajo, para que negarlo, ya que deberás hacer uso de las mismas id y class que tienes ahora y copiarlas a este fichero haciendo los cambios necesarios.

Otra opción es hacer uso de em en vez de px o % para las medidas, pero si tienes que cambiar todo puede darte más faena aún.

¡Suerte!

Julio Rodríguez · 26 Mar 2013

YoNoProgramo dijo:
Buenas,

Deberías crear un fichero diferente según el dispositivo desde el que accedes:

Tiene trabajo, para que negarlo, ya que deberás hacer uso de las mismas id y class que tienes ahora y copiarlas a este fichero haciendo los cambios necesarios.

Otra opción es hacer uso de em en vez de px o % para las medidas, pero si tienes que cambiar todo puede darte más faena aún.

¡Suerte!

con mediaquerys no hace falta!!

lobogris · 26 Mar 2013

wsoulrc dijo:
no, minima el navegador no cambies el zoom xDD

Ah! Vale xD, ya veo está con mediaquery se cambia el panel lateral izquierdo, está bastante guapa la web. Yo la verdad no sé cambiar la resolución en el navegador... lo miro desde aquí Screenfly / Test Your Website at Different Screen Resolutions

YoNoProgramo dijo:
Buenas,

Deberías crear un fichero diferente según el dispositivo desde el que accedes:

Tiene trabajo, para que negarlo, ya que deberás hacer uso de las mismas id y class que tienes ahora y copiarlas a este fichero haciendo los cambios necesarios.

Otra opción es hacer uso de em en vez de px o % para las medidas, pero si tienes que cambiar todo puede darte más faena aún.

¡Suerte!

Gracias, más que suerte necesito paciencia xDD Pero ¿qué diferencia hay de esto que me dices a mediaquery? No entiendo la diferencia... sería lo que digo abajo?

wsoulrc dijo:
con mediaquerys no hace falta!!

Lo que he entendido es lo siguiente, Yo hago mis hojas css tal cual variando las medidas y hago el llamamiento desde la página, por ejemplo a partir de 13 pulgadas el diseño se ve bien, por lo que haría algo así:
<link rel="stylesheet" type="text/css" media="screen, only screen and (max-device-width: 1250px)" href="estilo2.css"/>
y para mayores dejo el estilo que tengo ahora que se ve bien:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1251px)" href="estilo1.css"/>

¿Estoy en lo cierto?

Konorz · 26 Mar 2013

wsoulrc dijo:
con mediaquerys no hace falta!!

Nunca he trabajado con eso...

lobogris dijo:
Gracias, más que suerte necesito paciencia xDD Pero ¿qué diferencia hay de esto que me dices a mediaquery? No entiendo la diferencia... sería lo que digo abajo?

Lo que he entendido es lo siguiente, Yo hago mis hojas css tal cual variando las medidas y hago el llamamiento desde la página, por ejemplo a partir de 13 pulgadas el diseño se ve bien, por lo que haría algo así:
<link rel="stylesheet" type="text/css" media="screen, only screen and (max-device-width: 1250px)" href="estilo2.css"/>
y para mayores dejo el estilo que tengo ahora que se ve bien:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1251px)" href="estilo1.css"/>

¿Estoy en lo cierto?

Yo así a simple vista lo veo igual, solo que en vez de decirle el dispositivo, aplicas el media según una resolución. La finalidad es la misma.

Julio Rodríguez · 26 Mar 2013

YoNoProgramo dijo:
Nunca he trabajado con eso...

Yo así a simple vista lo veo igual, solo que en vez de decirle el dispositivo, aplicas el media según una resolución. La finalidad es la misma.

nop,

fijate en la url que puse yo, es disepo responsable

lobogris · 27 Mar 2013

YoNoProgramo dijo:
Nunca he trabajado con eso...

Yo así a simple vista lo veo igual, solo que en vez de decirle el dispositivo, aplicas el media según una resolución. La finalidad es la misma.

Y diciendole el dispositivo ¿cómo se hace eso? ¿cómo le dices qué dispositivo?

wsoulrc dijo:
nop,

fijate en la url que puse yo, es disepo responsable

Responsable? :qmeparto: no será adaptativo?

Julio Rodríguez · 27 Mar 2013

lobogris dijo:
Y diciendole el dispositivo ¿cómo se hace eso? ¿cómo le dices qué dispositivo?

Responsable? :qmeparto: no será adaptativo?

llamale x

responsive design

si quieres buscarlo en google para aprender es lo que mejroes resultados te da

lobogris · 27 Mar 2013

Sí pero bufff es demasiado para mí, tengo conocimientos nulos casi, me baso el 80% de los cambios en probar y lo voy logrando pero hay alguna cosa que me cuesta lo suyo porque la cambio para bien y se 'rompe' otra zona... me quedaré con hacer varias hojas de estilos por el momento :sisi1:

Konorz · 27 Mar 2013

lobogris dijo:
Y diciendole el dispositivo ¿cómo se hace eso? ¿cómo le dices qué dispositivo?

Es lo que he puesto en mi primer mensaje, en "media" pones el dispositivo, o bien como se está hablando en este tema, poner según píxeles de pantalla que, para mi, es lo mismo.

lobogris · 27 Mar 2013

Vale, ya se como me dices

Bueno, a ver si saco algobueno de ello

Gracias a los dos :mola:

sPablorc · 9 Abr 2013

lobogris dijo:
Y diciendole el dispositivo ¿cómo se hace eso? ¿cómo le dices qué dispositivo?

Responsable? :qmeparto: no será adaptativo?

tienes que poner media querys dependiendo del tamaño de cada dispositivo en el que quieras que se mire
@media only screen and (min-width : 770px) {"aqui pones el estilo}
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {"aqui pones otro estilo}

no se si es esto a lo que te refieres,pero con esto consigues que valla cambiando el estilo dependiendo del tamaño de la pantalla

lobogris · 9 Abr 2013

sPablorc dijo:
tienes que poner media querys dependiendo del tamaño de cada dispositivo en el que quieras que se mire
@media only screen and (min-width : 770px) {"aqui pones el estilo}
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {"aqui pones otro estilo}

no se si es esto a lo que te refieres,pero con esto consigues que valla cambiando el estilo dependiendo del tamaño de la pantalla

Sí, es esto, gracias, de todas formas ya me he informado, aunque no me he puesto porque bufff necesito más tiempo del que tengo, es bastante laborioso.

¿No habría una manera de hacer que se reduzca o amplie el tamaño de la web en cada pantalla? Por ejemplo sólo una hoja de estilos pero mandar al dispositivo que al abrir la página si es de x resolución reduzca a x% o amplie a x% del tamaño original.

No sé si sería del todo correcto pero lo veo más fácil

Duda en CSS

Comparte esta página