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 cacher lorsque la largeur du navigateur est inférieure ou égale à 1026px. Est-ce possible de faire avec les css: @media only screen and (min-width: 1140px) {} Si il n'est pas possible avec les css, Est-il une alternative?

Infos supplémentaires:
Lorsque l'élément div est caché, je ne veux pas de blanc espace blanc. J'aimerais que la page à circuler comme il l'aurait fait si j'ai supprimé l'élément div entièrement à partir du code.

La div je suis le masquage est <div id="fadeshow1"></div>.

Doctype HTML5.

J'ai utilisé du javascript pour place une galerie en div.

Je veux qu'elle ressemble à ceci quand il est plus grand que 1026px largeur: Masquer l'élément div lorsque la taille de l'écran est inférieure à une taille spécifique

Je veux qu'elle ressemble à ceci lorsqu'il est inférieur 1026px largeur:
Masquer l'élément div lorsque la taille de l'écran est inférieure à une taille spécifique

cette question est-elle encore active?
Je suis encore en train de votes sur ma réponse, alors, oui, il est.

InformationsquelleAutor Brett Merrifield | 2012-11-20

110

Vous pouvez le faire avec du CSS:
```
@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}
```
Nous utilisons max-width, parce que nous voulons nous faire une exception pour le CSS, quand un écran est petits que le 1026px.
min-width rendrait la règle CSS comte pour tous les écrans de 1026px largeur et plus.

Quelque chose à garder à l'esprit est que @media les requêtes ne sont pas pris en charge sur IE8 et inférieur.
- ahhhhhhh, fonctionne parfaitement! Merci Andy et Cerbrus. 🙂
InformationsquelleAutor Cerbrus
15
```
@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}
```
Tout moment, l'écran est moins de 1026 pixels de large, rien à l'intérieur de la { } s'appliquent.

Certains navigateurs ne prennent pas en charge les requêtes de média. Vous pouvez contourner cela en utilisant une bibliothèque javascript comme Respond.JS
- ahhhhhhh, fonctionne parfaitement! Merci Andy et Cerbrus. 🙂
InformationsquelleAutor Andy
6

si vous êtes en utilisant bootstrap u peut juste utiliser le caché-sm ( lg ou md ou xs) en fonction de ce que tu veux. u peut ensuite aller dans le fichier css et spécifier les pourcentages u il veut montrer sur. dans l'exemple ci-dessous, il sera caché sur de grands écrans, moyennes et très petites, mais de montrer sur les 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>
```
- Bootstrap par defualt a ce fichier css avec tous les @media tailles d'écran pour les très petites, petites,moyennes et grandes définir tous les u besoin de faire est de les ajuster à ur besoins. même si vous n'êtes pas en utilisant bootstrap u pouvez copier et coller dans le fichier css. lien vers le fichier -> [lien](drive.google.com/file/d/0B5X-yh_L2HHNZ2gyejdXTWRCc28/... )
InformationsquelleAutor 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";
}

À l'aide de @media dans le css est le plus facile. Javascript rend cette tâche plus compliquée.
Je suis nouveau sur des applications web, donc corrigez-moi si je me trompe, mais n'est-il pas préférable d'utiliser ==! au lieu de =! ?

InformationsquelleAutor NaijaProgrammer

2

Vous devez simplement utiliser une requête de média dans le CSS pour accomplir cette tâche.
```
@media (max-width: 1026px) {
    #fadeshow1 { display: none; }
}
```
Malheureusement, certains navigateurs ne prennent pas en charge @media (en regardant vous IE8 et ci-dessous). Dans ces cas, vous avez quelques options, mais le plus commun est Respond.js ce qui est un léger polyfill pour min/max-width CSS3 Media Queries.
```

```
Cela permettra à votre responsive design pour fonctionner dans les anciennes versions d'IE.
*référence

InformationsquelleAutor JRulle
1

Cela devrait vous aider:
```
if(screen.width<1026){//get the screen width
   //get element form document
   elem.style.display == 'none'//toggle visibility
}
```
768 px devrait être assez ainsi
- Visibility:hidden fait la div invisible, mais ne pas se débarrasser de la zone, il a pris place sur la page, donc l'OP aurait un gros bloc vide dans le milieu de son site. Display: none est mieux
InformationsquelleAutor vaibhav
0

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

InformationsquelleAutor Mirco
0

L'approche la plus simple que je connaisse est à l'aide de onresize() func:
```
   window.onresize = function(event) {
        ...
    }
```
Voici un violon pour elle

InformationsquelleAutor TNCodeMonkey

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

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

InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.