*.html
<div class="logo"><img alt="logoPrueba" longdesc="logoPrueba" src="./images/logoPrueba.jpg" /></div>
*.css
Difinimos un valor base para la clase logo para que no se muestre:
.logo { visibility: hidden; display:none; }
en el media query la marcamos como visible:
@media only screen and (min-width: 768px) and (max-width: 959px) {
.logo { visibility: visible; display:inline }
}
Veremos que cuando el navegador tenga el ancho entre 768px y 959px se mostrará la imagen
Suscribirse a:
Enviar comentarios (Atom)
Jesús Moreno - Ingeniero Ténico Informático - consultor Informático
Hola, soy Jesús Moreno Ingeniero Técnico Informático en sistemas por la US y propietario de éste blog. Mi trabajo en los ultimos años se ...
-
El ejemplo se ha probado en una base de datos Microsoft SQL Server 2008 R2 CREATE FUNCTION dbo . udf_GetNumeric (@ strAlphaNumeric VARCHA...
-
Ultima hora: Máxima difusión, aquí la sentencia del Tribunal Supremo sobre la Clausula Suelo . http://s01.s3c.es/imag/doc/ 2013-06-04/pg.4...
-
Al intentar compartir la impresora nos lanza un error que dice: " No se pudo guardar la configuración de la impresora. No hay no hay m...
Hola Jesús.
ResponderEliminarMe ha servido de mucho tu aporte.
Muy fácil de entender y ya lo tengo funcionando.
Solo que antes de llegar a tu pagina investigue en otros sitios web y encontre esto:
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
/* Code */
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
/* Code */
}
Comparando, tu ejemplo es mas simple.
En que afecta o beneficia?? El usar @media screen and (max-width: ? )
declarando cada media query con su medida?
Hola Gabriel, afecta del siguiente modo:
ResponderEliminarSe aplica el estilo que cumpla las condiciones de tamaño. Ejemplo tienes 3 estilos definidos uno para 100px otro para 200px y otro para 300px. Pues bien cuando el tamaño de tu pagina sea de 150 aplicará el que cumpla la condiciones, cuando la pagina sea de 250px de ancho aplicará el otro estilo ..
Si modificas progresivamente con el raton el ancho de la ventana del navegador en tu pc podrás ver como la pagina se muestra con los distintos formatos. Esto es muy util por ejemplo en dispositivos apaisados (rectagulares, no cuadrados) de modo que la pagina podrá verse de un modo si lo pones en vertical y de otro si usas horizontal.
Espero que te haya ayudado
Hola, buenos días, una pregunta ¿me podrías ayudar con logo? Tengo un sitio web en el que no quiero que se muestre mi logo cuando lo abren de versiones móviles ni tablets.
ResponderEliminarHola, siguiendo el ejemplo de la entrada. Escribo un ejemplo con lo que necesitas.
Eliminar<html>
<head>
< style >
@media screen and (max-width: 768px) {
.logo{
display: none;
}
}
< /style >
</head>
<body>
<h2>Este logo deja de verse cuando la ventana del navegador es menor de 768px</h2>
<p>Para probar el ejemplo puedes modificar progresivamente con el raton el ancho de la ventana del navegador en tu pc y podrás ver como el logo deja de verse cuando la ventana del navegagor tiene un ancho inferior a 768px. Depende de la resolución a la que quieras que desaparezca. Espero que te ayude.</p>
<div class="logo"><img alt="logoPrueba" longdesc="logoPrueba" src="http://1.bp.blogspot.com/-Rbnav2X2Mo0/VgzhCK-qVAI/AAAAAAAABOs/4WI-BbcFOho/s1600-r/eurocoleccionistas.com.jpg" /></div>
</body>
</html>
Aqui te dejo el ejemplo funcionando para que lo pruebes:
Eliminarhttp://jesusmgcia.blogspot.com.es/p/ocultar-html.html
Muchas gracias, en mi caso mi sitio soymercadologo.com está en Wordpress ¿dónde lo aplico?. El logo principal es el que quiero ocultar ... Muchas gracias de antemano
Eliminar