javascript - según - Ocultar el elemento div cuando el tamaño de la pantalla es más pequeño que un tamaño específico

ocultar elementos en bootstrap 4

Question

Tengo un elemento div que quiero ocultar cuando el ancho del navegador es menor o igual a 1026px. ¿Es posible hacer esto con la @media only screen and (min-width: 1140px) {} 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 en blanco en blanco. Me gustaría que la página fluya como lo haría si eliminara el elemento div completamente del código.

El div que estoy ocultando es <div id="fadeshow1"></div> .

Doctype HTML5.

Usé javascript para colocar una galería en ese div.


Quiero que se vea así cuando es más grande que 1026px de ancho:

Quiero que se vea así cuando tiene menos de 1026px de ancho:

Answer 1

@media only screen y (min-width: 1140px) deberían hacer su trabajo, mostrarnos su archivo css

Answer 2

El enfoque más fácil que conozco es usar la función onresize ():

 window.onresize = function(event) {
...
}

Aquí hay un violín para ello.

Answer 3

Esto debería ayudar:

if(screen.width<1026){//get the screen width
//get element form document
elem.style.display == ''none''//toggle visibility
}

768 px debería ser suficiente también

Answer 4

No sé sobre 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";
}

Answer 5

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á que la regla CSS cuente para todas las pantallas de 1026px de ancho y más grandes.

Algo que se debe tener en cuenta es que las consultas de @media no son compatibles con IE8 y anteriores.

Answer 6

Si está usando bootstrap, u puede simplemente usar hidden-sm (lg o md o xs) dependiendo de lo que quiera. Luego puede ir al archivo css y especificar los porcentajes en los que quiere que se muestre. en la muestra de abajo 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>

Answer 7

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 tu IE8 e inferior). En esos casos, tiene algunas opciones, pero la más común es Respond.js, que es un polyfill ligero para consultas de medios de CSS3 de ancho mínimo y máximo.

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Esto permitirá que su diseño receptivo funcione en esas versiones antiguas de IE.
*reference

Answer 8

Tienes que usar ancho máximo en lugar de ancho mínimo.

<style>
@media (max-width: 1026px) {
#test {
display: none;
}
}
</style>
<div id="test">
<h1>Test</h1>
</div>

Answer 9

@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 elemento dentro de { } .

Algunos navegadores no admiten consultas de medios. Puede Respond.JS esto utilizando una biblioteca javascript como Respond.JS