Paparkan kandungan yang berbeza berdasarkan lebar skrin
Untuk satu elemen saya mempunyai dua teks berbeza berdasarkan lebar skrin. Saya mahu memaparkan narrow。当屏幕宽度大于400px时，我想显示large apabila lebar skrin kurang daripada atau sama dengan 400px.
Berikut ialah kod: https://jsbin.com/qagetoseva/edit?html,css,output
Tetapi masalahnya, apabila lebarnya 400px, kod ini tidak memaparkan apa-apa, adakah sesiapa tahu bagaimana untuk mengubah suainya?
<!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;
}
}