Cargar css dependiendo del dispositivo.
5 seguidores
Hola a todos, recientemente se me ha planteado una cuestión.
Tengo que hacer una web y que el cliente pueda gestionar la información de la misma, para ello he pensado en utilizar Joomla y hacer un CMS, el cliente también necesita que se visualize correctamente en móviles y tablets, para ello he pensado hacer CSS diferentes dependiendo del dispositivo desde el que se acceda, pero no se como cargar uno u otro dependiendo del caso y tampoco estoy seguro si será un planteamiento correcto...
Alguien puede asesorarme?, alguna solución?..
Muchas gracias de antemano!!...
Pedro Gutierrez
Si, se puede hacer eso perfectamente, en el <link> que añades el CSS puedes poner el atributo "media" y elejir para que dispositivo, o hacer @media querys en el CSS directamente, que yo te recomiendo esto porque puedes elegir a partir de que ancho de pantalla cambiar elemenos en el CSS.
Este es un manual que hice de como hacer lo que necesitas: http://xitrus.es/utilidades/Media_en_CSS
Fíjate en mi web, haz pequeña la ventana del navegador y veras que según el ancho cambian los elementos, es para crear el diseño responsivo y que se vea bien en dispositivos móviles.
Espero haber sido de ayuda.
Alo
Gracias pedro_xitrus voy a echar un vistazo a ese manual ahora mismo y de paso a tu web, gracias por la rápida y efectiva respuesta!!!
Un saludo!!!
Alo
Hola de nuevo!!!
He visto que en este ejemplo al redimensionar el navegador los elementos se van ajustando, colocando y escalandose al tamaño del navegador.
http://vasterad.com/themes/?theme=incredible
La ténica para realizar esto es detectar el dispositivo o cargar css mediante javascript detectando el tamaño del navegador???? o quizás existe otra manera...
Alguna sugerencia???
Gracias de antemano!!!!
Pedro Gutierrez
Esto se hace con @media querys () de la siguiente forma, por ejemplo:
si el navegador tiene más de 800px:
las imágenes tienen 200px de ancho
si el navegador tiene menos de 800px:
las imágenes tienen 120px
Y así con todo.
Alo
Ap!!. gracias de nuevo, voy a probar todo esto!!
Un saludo!!!
CalcoMedia
Buenas Alo,
Tal y como te comenta Pedro-Xitrus usando los @media puedes construir tu hoja de estilos para adaptarlo tanto a otros dispositivos como a cualquier tamaño de pantalla... te pongo un ejemplo práctico:
/* Slider ------------------------ */.homeslider { width:100%; background: #0194c8; border-top: groove #000000; border-bottom: groove #000000; }
@media only screen and (max-width: 767px) {
.flex-caption{display:none}
}
En una web tengo creado un slider de varias imágenes que, si la pantalla es pequeña, no me interesa que exista porque me descompondría el resto de objetos... pues uso el @media en mi hoja de estilos...
Así, por ejemplo, puedes hacer que una barra de menus se convierta en un botón donde seleccionar las opciones de navegación y adaptar tu contenido a dispositivos móviles...
Por cierto, muy bueno el manual de Pedro-Xitrus, muy descriptivo y sencillo de leer y asimilar.
Saludos!
guitobon
Calcomedia, con tu mediaquery, el slider sigue existiendo aunque no se vea.
Es decir, el navegador carga todas las imagenes y toda la logica de funcionamiento (el js).
Eso puede llegar a ser 1Mb de "propina" facilmente.
yo de ti intentaria montarlo de otra forma o bien complementarlo para que eso no ocurra.
CalcoMedia
Pues llevas toda la razón guitobon no me había parado a pensarlo... y realmente es un problema importante para los dispositivos móviles...
Gracias por avisarme!!!
Usuario desconocido
La forma más limpia es detectarlo desde el lado servidor con PHP -> http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/
Otra forma podría cargar una hoja de estilo básica por default y detectar el entorno con jquery y aplicarle la hoja de estilo más adecuada.