[SOLUCIONADO] Diseño responsive

b44 · #1 (**permalink**) 15/02/2015, 11:48

Hola a todos he creado hojas de estilo para:
móviles verticales:
1) @media screen and (max-device-width : 480px) {

para móviles horizontales y tablets verticales:
2) @media screen (min-device-width : 480px) and (max-device-width : 768px) {

y luego un estilo para tablets y escritorio

pero cuando el móvil esta vertical utiliza la hoja de de estilo 1) pero cuando esta horizontal no utiliza la hoja de estilo 2 sino el estilo general para escritorio.

El móvil que estoy utilizando tiene una resolución de 360 x 640 así que yo entiendo que verticalmente debe utilizar la primera hoja de estilo hasta 480px y al ponerlo verticalmente debe utilizar la segunda hoja de estilo entre 480 y768 pero no es así y no se que es lo que esta mal.

Os ruego que me ayudéis o me orientéis muchas gracias

Zeromm · #2 (**permalink**) 16/02/2015, 06:05

¿Porque usas dos hojas de estilo distintas en vez de usar una sola?

b44 · #3 (**permalink**) 17/02/2015, 03:10

Me parece mas comodo asi puedo aplicar el estilo al tamño de ventana que me interesa.
El problema que tengo es que no entindo muy bien el significado de:
@media all and (max-width:480px) {
esto
@media all and (max-width:768px) {
esto
@media screen and (max-device-width : 480px) {
esto
@media screen (min-device-width : 480px) and (max-device-width : 768px) {

He estado probando pero ninguno funciona como yo quiero, una hoja de estilo exclusiva para pantallas con una ventana de hasata 480 px otra para una pantalla de ventanas entre 480 px y 768 px y luego la general para superiores a 768px que serian pc de escritorios, tablets horizontales, notebook ......

TAmpoco he encontrado documentacion en castellano qeu me explique o resuelva dudas al respecto.

Zeromm · #4 (**permalink**) 17/02/2015, 05:52

A ver, si usas más de una hoja de estilo estás pasando olimpicamente de una de las grandes virtudes del responsive design, el meter todos los cambios dependiendo de la resolución en un solo archivo css.

Para aplicar el estilo al tamño de ventana que te interesa se usa exactamente la parte que no entiendes.

Dentro de:

@media all and (max-width:768px) {
estilos css
}

tienes que meter todos los estilos que quieras que se cambien para pantallas de 768px de resolución o menos...

No uses más de una hoja de estilos, es innecesario y no es lo más óptimo.

b44 · #5 (**permalink**) 17/02/2015, 12:04

Bien gracias lo he entendido utilizare solo una hoja de estilo, pero:
tengo que utilizar

Cita:

@media screen and (max-device-width : 480px) {

para pantallas menores a 480px
y esto

Cita:

@media screen (min-device-width : 480px) and (max-device-width : 768px) {

para pantallas entre 480 y 768px

Asi deberia funcionar entiendo

Zeromm · #6 (**permalink**) 17/02/2015, 13:18

Si, pero lo mejor es que sepas como funcionan todas las posibilidades de los mediaqueries, que es como se llama lo que pones :)

https://developer.mozilla.org/es/docs/CSS/Media_queries

pzin · #7 (**permalink**) 17/02/2015, 13:29

Lo de usar una o varias hojas de estilo es bastante relativo. De hecho si usas varias para separar, se puede incluso indicar el sólo cargar una mediante el atributo media, lo que en principio ahorra el cargar la otra hoja.

Pero bueno, en la mayoría de sitios optimizar esto o no realmente al final no influye mucho.

alzacon · #8 (**permalink**) 17/02/2015, 15:52

Cita:

Iniciado por b44

Bien gracias lo he entendido utilizare solo una hoja de estilo, pero:
tengo que utilizar

Cita:

@media screen and (max-device-width : 480px) {

para pantallas menores a 480px
y esto

Cita:

@media screen (min-device-width : 480px) and (max-device-width : 768px) {

para pantallas entre 480 y 768px

Asi deberia funcionar entiendo

Piensa en un dispositivo con device-widht: 480px ¿cuál de las reglas css va a usar?

Zeromm · #9 (**permalink**) 17/02/2015, 16:24

Cita:

Iniciado por pzin

Lo de usar una o varias hojas de estilo es bastante relativo.

Hombre, relativo relativo... el hecho de que expertos en optimización siempre aconsejen como "norma general", usar solo un archivo css en vez de dos o más creo que es bastante significativo...

Cita:

Iniciado por pzin

se puede incluso indicar el sólo cargar una mediante el atributo media, lo que en principio ahorra el cargar la otra hoja

Cierto, el problema es que resulta un atributo demasiado especifico y en la mayoría de casos no será suficiente.

Cita:

Iniciado por pzin

Pero bueno, en la mayoría de sitios optimizar esto o no realmente al final no influye mucho.

Cierto. Tampoco influye mucisimo pasar los javascripts al footer... ni activar las ETags... ni evitar las redirecciones... ni usar un CDN... ni evitar meter css en linea... tampoco influye mucho el cerrar las etiquetas hml... etc etc... pero siempre será más optimo hacerlo que no hacerlo.

Es cierto que una cosa sola no hará grandes mejoras, pero si cumples todas las optimizaciones posibles, y la de usar solo un archivo css es de las más básicas, al final el resultado en cuanto a optimización será muchó más eficaz y completo

fede5426 · #10 (**permalink**) 17/02/2015, 19:08

Cita:

Iniciado por Zeromm

Hombre, relativo relativo... el hecho de que expertos en optimización siempre aconsejen como "norma general", usar solo un archivo css en vez de dos o más creo que es bastante significativo...

Tengo entendido que usar hojas de estilo diferentes para cada tamaño de dispositivo agiliza la carga de la página, ya que sólo carga el archivo css que necesita y no TODOS los estilos. Perdón si me equivoco.

Respondiendo al tema, yo no le asigno un "min-width".. directamente uso:

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

Y asi sucesivamente, no se si es lo que se aconseja pero nunca tuve problemas, siendo que si la pantalla tiene menos de 768 carga esos estilos, y si llega a 480 carga los del otro media.. sin necesidad de asignar un "min-width".

Otra cosa que he visto es que asignan un min-width con 1px de mas.. o sea quedaria asi:

@media screen and (max-width : 480px) {}
@media screen (min-width : 481px) and (max-width : 768px) {}

Saludos.

EDITO: Y me corrijo. Me di cuenta de que sólo he usado el "@media screen and (max-width : 480px) {}" no hice estilos para otros tamaños en la misma hoja, me equivoqué, así que no se si funciona realmente lo que dije al principio. Lo mas probable es que la segunda opción sea la correcta (Colocar 1px mas en el minimo).

Zeromm · #11 (**permalink**) 18/02/2015, 03:20

Cita:

Iniciado por fede5426

Tengo entendido que usar hojas de estilo diferentes para cada tamaño de dispositivo agiliza la carga de la página, ya que sólo carga el archivo css que necesita y no TODOS los estilos. Perdón si me equivoco.

Busca información sobre WPO (Web Performance Optimization), será raro el sitio donde no te aconsejen usar solo un css. Es más, incluso Google en su herramienta "pagespeed", te lanza un aviso si ve que tienes más de un css.

fede5426 · #12 (**permalink**) 18/02/2015, 10:20

Cita:

Iniciado por Zeromm

Busca información sobre WPO (Web Performance Optimization), será raro el sitio donde no te aconsejen usar solo un css. Es más, incluso Google en su herramienta "pagespeed", te lanza un aviso si ve que tienes más de un css.

Gracias por la info, voy a buscar.. Yo no lo estaba confirmando solo lo vi por ahi buscando información, por eso dije que era lo que yo tenia entendido :P Es mas, yo uso una sola hoja, queria sacarme la duda nada mas asi que gracias de nuevo.