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;
}
} 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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