Estoy desarrollando una página de prueba y tengo en una de ellas un boligrama hecho con canvas y en la otra tengo un accordeon. Lo que debo hacer es que en pantallas grandes, digamos una relución de 800 * 600 o mayor debe mostrarse el boligrama, pero un tamaño menor a este, debe cambiarse por el accordeon. ¿Alguna idea de como hacer esto?
Soy nuevo en web y se los agradecería mucho.
Un poco del código que tengo es el siguiente:
<body>
<span class="boligrama">
<script src="Componentes/Action.js"></script>
</span>
<span class="acordeon">
...
</span>
<style type="text/css">
@media(min-width: 700px){
span.acordeon{
display: block;
display: none;
}
}
@media(max-width: 700px){
span.boligrama{
display: block;
display: none;
}
}
</style>
</body>
El script que se encuentra en la clase boligrama, me dibuja una estructura con HTML5 canvas, y la clase acordeon, me realiza un acordeon que despliega información. Eso ya lo tengo implementado y de hecho lo tengo en archivos separados. Mi primera idea fue unir el llamado al script y el acordeon en un mismo archivo y tratar de hacer el cambio con un media queries pero no supe como hacerlo bien. Basicamente lo que quiero es que al hacer el tamaño de la pantalla menor a 800px aparezca el acordeon y desaparezca el canvas, en caso contrario, solo aparezca el canvas.
