web-dev-qa-db-fra.com

Masquer l'élément div lorsque la taille de l'écran est inférieure à une taille spécifique

J'ai un élément div que je veux masquer lorsque la largeur du navigateur est inférieure ou égale à 1026 pixels. Est-ce possible de faire avec le css: @media only screen and (min-width: 1140px) {} Si css n'est pas possible, y a-t-il une alternative?

Informations supplémentaires: Lorsque l'élément div est masqué, je ne souhaite pas d'espace blanc. J'aimerais que la page se déroule comme si je supprimais entièrement l'élément div du code.

Le div que je cache est <div id="fadeshow1"></div> _ .

HTML5 Doctype.

J'ai utilisé javascript pour placer une galerie dans cette div.


Je veux qu'il ressemble à ceci quand il est plus grand que 1026px largeur: http://i.stack.imgur.com/REBPi.png


Je veux qu'il ressemble à ceci quand il a moins de 1026px de largeur: http://i.stack.imgur.com/XdiL4.png

javascripthtmlcsshtml5css3
38
Brett Merrifield

Vous pouvez le faire avec CSS:

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

Nous utilisons max-width, parce que nous voulons faire une exception au CSS, lorsqu'un écran est plus petit que le 1026px. min-width _ ferait en sorte que la règle CSS compte pour tous les écrans de largeur 1026px et plus grande.

Il ne faut pas oublier que @media les requêtes ne sont pas prises en charge sur IE8 et les versions antérieures.

101
Cerbrus
@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}

Lorsque l'écran a une largeur inférieure à 1026 pixels, tout ce qui se trouve à l'intérieur de la { } s'appliquera.

Certains navigateurs ne supportent pas les requêtes multimédia. Vous pouvez résoudre ce problème en utilisant une bibliothèque javascript telle que Respond.JS

15
Andy

si vous utilisez bootstrap vous pouvez simplement utiliser hidden-sm (lg ou md ou xs) en fonction de ce que vous voulez. vous pouvez ensuite aller dans le fichier css et spécifier les pourcentages que vous voulez dans l'exemple ci-dessous, il se cache sur les grands écrans, les écrans moyens et les très petits, mais s'affiche sur de petits écrans en prenant la moitié de l'écran.

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
6
Kabengwa Patrick

Je ne sais pas à propos de CSS, mais ce code Javascript devrait fonctionner:

    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";
}
5
NaijaProgrammer

Pour ce faire, vous devez simplement utiliser une requête multimédia en CSS.

@media (max-width: 1026px) {
    #fadeshow1 { display: none; }
}

Malheureusement, certains navigateurs ne supportent pas @media _ (vous regarde IE8 et ci-dessous). Dans ces cas, vous avez quelques options, mais la plus courante est Respond.js, qui est un polyfill léger pour les requêtes de média CSS3 de largeur minimale/maximale.

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

Cela permettra à votre conception réactive de fonctionner dans ces anciennes versions d’IE.
* référence

2
JRulle

Cela devrait aider:

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

768 px devrait aussi suffire

1
vaibhav

Vous devez utiliser max-width au lieu de min-width.

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

La méthode la plus simple que je connaisse consiste à utiliser onresize () func:

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

Voici un violon pour cela

0
TNCodeMonkey

@media only screen et (min-width: 1140px) devrait faire son travail, montrez-nous votre fichier css

0
Mirco