recherche

Maison  >  Questions et réponses  >  le corps du texte

Afficher un contenu différent en fonction de la largeur de l'écran

Pour un élément, j'ai deux textes différents en fonction de la largeur de l'écran. Je souhaite afficher narrow。当屏幕宽度大于400px时，我想显示large lorsque la largeur de l'écran est inférieure ou égale à 400px.

Voici le code : https://jsbin.com/qagetoseva/edit?html,css,output

Mais le problème c'est que lorsque la largeur est 400px, ce code n'affiche rien, quelqu'un sait comment le modifier ? 

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <style>
        .me {
          height: 100vh;
        }
    </style>
</head>
<body>
  <div class="hide-if-large">narrow</div>
  <div class="hide-if-narrow">large</div>
</body>
</html>
@media screen and (min-width: 400px) {
    .hide-if-large {
        display:none
    }    
}

@media screen and (max-width: 400px) {
    .hide-if-narrow {
        display: none;
    }
}

P粉904450959P粉904450959263 Il y a quelques jours438

répondre à tous(1)je répondrai

  • P粉642436282

    P粉6424362822024-04-02 17:29:00

    Cher ami, il y a un problème avec vos requêtes multimédias CSS. 

    @media screen and (max-width: 400px) {
.hide-if-large {
    display:none
}

    }

    @media screen and (max-width: 1024px) {
    .hide-if-narrow {
        display: none;
    }
}

    J'ai modifié la deuxième requête multimédia en 1024px pour l'adapter à la taille de la tablette. Vous devez créer une nouvelle requête multimédia pour les écrans plus grands, comme une largeur minimale de 1 025 px 

    répondre
    0
  • Annulerrépondre