Zeigen Sie je nach Bildschirmbreite unterschiedliche Inhalte an
Für ein Element habe ich je nach Bildschirmbreite zwei unterschiedliche Texte. Ich möchte narrow。当屏幕宽度大于400px时，我想显示large anzeigen, wenn die Bildschirmbreite kleiner oder gleich 400 Pixel ist.
Hier ist der Code: https://jsbin.com/qagetoseva/edit?html,css,output
Aber das Problem ist, dass dieser Code bei einer Breite von 400px nichts anzeigt. Weiß jemand, wie man ihn ändern kann?
<!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;
}
}