reconocer resolucion de pantalla y redireccionar a css

[tasmany94]

Hola buenas,vereis este problema es algo común pero miro y miro y no encuentro,o lo que encuentro no me sirve.

quiero segun la resolucion de pantalla,me abra un css o otro para la pagina.en este caso para todas las pantallas.a resoluciones,800,1024,1280,1400 y 1600.
para ello..por javascript he hecho este codigo..pero no me funciona..

<script language="javascript">

if (screen.width >= 800 && screen.width < 1024)
{
document.write('<link rel="stylesheet" type="text/css" href="800.css" />');
}

if (screen.width >= 1024 && screen.width < 1280)
{
document.write('<link rel="stylesheet" type="text/css" href="1024.css" />');
}

if (screen.width >= 1280 && screen.width < 1400)
{
document.write('<link rel="stylesheet" type="text/css" href="1280.css" />');
}

else
{
}

</script>

esto basicamente es pero añadiendo todas las resoluciones.el problema que tengo es en esta linea :

if (screen.width >= 1280 && screen.width < 1400)

no me coje el && screen.width <1400 osea.la segunda condición.
lo que yo necesito es que sea igual o mayor que 1280 y menor que 1400.pero no lo consigo.y bueno esa linea pero en todas las que cambian los balores me refiero.
alguien tiene idea de como podria hacerlo??

gracias de antemano.

espero una solución.

[chwc]

primero que nada, no uses screen.width, usa window.innerWidth !
uno te da el ancho de la pantalla, y l otro de la ventana, pero el que usas es el de la ventana, no el de la pantalla!

mira, hay opciones mejores que cambiar el link a la hoja de estilos, existen las Hojas de estilos adaptables

Código CSS:

header {
    width: 900px;
    margin: 0 auto;
}
 
@media screen and (max-width: 900px){
   header {
    width: auto;
   }
}
}
 

que no requieren Javascript, y ademas, al redimensionar la ventana, se aplican automaticamente !

lee mas aqui http://redticos.net/blog/run/diseno-...ptable-css-med
o buscalo en google

un saludo

[tasmany94]

Muchas graciias!!!!me a servido de mucho!
Por lo que he leido...seria en las clases del css seria simplemente poner despues el @ media y el auto al width o al height.pero porque el auto?es lo unicoo que no entiendo.osea.se adapta solo poniendo el auto?? Ese valor de esa clase??

Muchas gracias de antemano!

[chwc]

Iniciado por tasmany94

Muchas graciias!!!!me a servido de mucho!
Por lo que he leido...seria en las clases del css seria simplemente poner despues el @ media y el auto al width o al height.pero porque el auto?es lo unicoo que no entiendo.osea.se adapta solo poniendo el auto?? Ese valor de esa clase??

Muchas gracias de antemano!

el valor auto de la propiedad width, significa que obtenga el ancho automaticamente, es decir, que obtenga el mayor ancho posible.

pero esa propiedad solo la estaba aplicando cuando el ancho de la pantalla sea menor a 900px, cuando era mayor, tenia la propiedad de un ancho fijo de 900px y un margen automatico para centrarlo

un saludo

[tasmany94]

vale muchicimas graciias!!

busque informacion y buah gracias por todo!!

ahora el codigo lo e dejado asi : aver si funciona pero en teoria si.

#pagina {
width:1000px;
float:left;
clear:both;
margin-left:20%;
}

@media screen and (max-width:1000px) and (min-width:800) {

#pagina {
width:600px;
}
}

esto en teoria deberia de funcionar no? estoy aciendo todo el codigo pero en teoria esto me diria.. si tiene maximo de 1000px y minimo de 800 entonces..esos estilos cambian. ósea..si esta entre 800 y 1000 px esos estilos...cierto?si esto funciona te ago un monumento hehe

[Carlangueitor]

¿Y por qué no lo pruebas? Creo que es más rápido.

Saludos

[tasmany94]

bueno ya lo probe.pero ahooora el problema..que vamos mas bien es una consulta..

he puesto este codigo:

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

.pagina {
float:left;
clear:both;
margin-left:20%;
width:500px;
height:600px;
background-color:#0099FF;
}
}

@media screen and (max-width: 1200px) and (min-width: 1001px) {
.pagina {
width:900px;
background-color:#FF00FF;
}
}

pero la cuestion de esto,en la resolucion segunda..osea..entre 1001 y 1200,

se me queda el estilo solo el de:
.pagina {
width:900px;
background-color:#FF00FF;
}

me imagino que sera por el primero @media screen and (max-width: 1001px),

osea.primero debo poner los estilos y luego los @media, pero el estilo por defecto tiene que estar.la cuestion es,que tamaño se pone de defecto,y cuando volvera a el?

por lo que tengo entendido, si pongo el de defecto a 800x600 y con @media pongo para las demas resoluciones, se ajustaria a esa resolución no?

gracias de antemano.

[tasmany94]

mm chicos no me funciona este codigo..decirme porque esta mal xd


body {
margin:0%;
width:100%;
height:100%;
}
.pagina {
float:left;
clear:both;
margin-left:20%;
width:500px;
height:600px;
background-color:#0099FF;
}
.contenedor {
float:left;
clear:both;
margin-top:200px;
width:500px;
height:200px;
background-color:#00FF66;
text-align:center;
font-size:36px;
font-weight:bold;
}
/*resolucion de 1024*/
@media screen and (max-width: 1199px) and (min-width: 1001px) {
.pagina {
width:600px;
height:768px;
background-color:#FF00FF;
}
}
/*resolucion de 1280*/
@media screen and (max-width:1399px) and (min-width: 1200px) {
.pagina {
width:800px;
height:768px;
}
}
/*resolucion de 1400*/
@media screen and (max-width:1599px) and (min-width: 1400px) {
.pagina {
width:900px;
height:768px;
}
}
/*resolucion de 1600*/
@media screen and (min-width:1600px) {
.pagina {
width:1000px;
height:1024;
background-color:#9999FF;
}
}

los cambios de colores es para comprobarlo mejor que me cambia..pero no funciona..no se puede tener varios @media screen juntos?? o como seria?

[tasmany94]

SOLUCIONADO

ya esta chicos.ya lo e conseguido hacer xd era algo facil y sencillo y algo logico pero no me salia hehe

pongo el codigo:

Código CSS:

@media screen {
#pagina {
    float:left;
    clear:both;
    width:600px;
    height:768px;
    margin-left:20%;
    background-color:#00FF00;
}
 
 
}
@media screen and (min-width: 1000px) {
    #pagina {
        width:700px;
        background-color:#0000FF;
    }
        
}
@media screen and (min-width: 1200px) {
    #pagina {
        width:700px;
        background-color:#F00;
    }
        
}
 

simplemente ir de menos a mas y ya funciona!no esta probado en IE pero espero que funcione.sabeis si deberia ir en IE?

[tornado88]

Hola, tengo el codigo de mi sitio tambien con @media en una hoja de estilos responsive.css, lo que queria hacer si se puede es desde ese css redireccionar una url a la version movil del sitio.
Es decir, en lugar de que siempre adapte al ancho de las diferentes pantallas que cuando sea menor a por ejemplo 500px que redireccione automáticamente a la version movil, alguien sabe como seria un codigo css que redireccione a otra url?

[chwc]

Iniciado por tornado88

Hola, tengo el codigo de mi sitio tambien con @media en una hoja de estilos responsive.css, lo que queria hacer si se puede es desde ese css redireccionar una url a la version movil del sitio.
Es decir, en lugar de que siempre adapte al ancho de las diferentes pantallas que cuando sea menor a por ejemplo 500px que redireccione automáticamente a la version movil, alguien sabe como seria un codigo css que redireccione a otra url?

desde css no se puede, ya que css no permite ejecutar javascript.
lo que si se puede es obtener las dimensiones de la pantalla del cliente con javascript

Código Javascript:

screen.availWidth; // ancho de la pantalla
screen.availHeight; // alto de la pantalla