Ocultar elemento div cuando el tamaño de la pantalla es menor que un tamaño específico
Tengo un elemento div que quiero ocultar cuando el ancho del navegador es menor o igual a 1026px. ¿Es esto posible hacer con el css: @media only screen and (min-width: 1140px) {} Si no es posible con css, ¿hay alguna alternativa?
Información Adicional: Cuando el elemento div está oculto, no quiero un espacio blanco en blanco. Me gustaría que la página fluyera como lo haría si eliminara el elemento div por completo del código.
El div que estoy escondiendo es <div id="fadeshow1"></div>.
Doctype HTML5.
I utiliza javascript para colocar una galería en ese div.
quiero que se vea como este, cuando es más grande que 1026px ancho: 
Quiero que se vea así cuando tiene menos de 1026px de ancho:
9 answers
Puedes hacer esto con CSS:
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
Estamos usando max-width, porque queremos hacer una excepción al CSS predeterminado, cuando una pantalla es más pequeña que la 1026px.
min-width haría que la regla CSS contara para todas las pantallas de 1026px de ancho y más grandes.
Algo a tener en cuenta es que las consultas @media no son compatibles con IE8 y versiones anteriores.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-20 15:33:13
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
Cada vez que la pantalla tenga menos de 1026 píxeles de ancho, se aplicará cualquier cosa dentro de { }.
Algunos navegadores no admiten consultas de medios. Puedes evitar esto usando una biblioteca javascript como Respond.JS
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-20 15:34:26
No se acerca CSS pero este código Javascript debería funcionar:
function getBrowserSize(){
var w, h;
if(typeof window.innerWidth != 'undefined')
{
w = window.innerWidth; //other browsers
h = window.innerHeight;
}
else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
w = document.documentElement.clientWidth; //IE
h = document.documentElement.clientHeight;
}
else{
w = document.body.clientWidth; //IE
h = document.body.clientHeight;
}
return {'width':w, 'height': h};
}
if(parseInt(getBrowserSize().width) < 1026){
document.getElementById("fadeshow1").style.display = "none";
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-20 15:27:18
Si está usando bootstrap u puede usar el hidden-sm ( lg o md o xs) dependiendo de lo que u quiera. u puede entrar en el archivo css y especificar los porcentajes en los que desea que se muestre. en la muestra a continuación se ocultará en pantallas grandes, medianas y extra pequeñas, pero se mostrará en pantallas pequeñas tomando la mitad de la pantalla.
<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-29 11:06:52
Simplemente necesita usar una consulta de medios en CSS para lograr esto.
@media (max-width: 1026px) {
#fadeshow1 { display: none; }
}
Desafortunadamente, algunos navegadores no son compatibles con @media (mirando IE8 y abajo). En esos casos, tiene algunas opciones, pero la más común es Responder.js que es un polyfill ligero para consultas de medios CSS3 de ancho mínimo/máximo.
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
Esto permitirá que su diseño responsivo funcione en esas versiones antiguas de IE.
*referencia
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:33:15
Esto debería ayudar:
if(screen.width<1026){//get the screen width
//get element form document
elem.style.display == 'none'//toggle visibility
}
768 px también debería ser suficiente
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-21 12:35:11
@media solo pantalla y (min-ancho: 1140px) debe hacer su trabajo, muéstranos tu archivo css
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-20 15:19:30
El enfoque más fácil que conozco es usar onresize () func:
window.onresize = function(event) {
...
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-20 15:25:53
Tienes que usar max-width en lugar de min-width.
<style>
@media (max-width: 1026px) {
#test {
display: none;
}
}
</style>
<div id="test">
<h1>Test</h1>
</div>