cari

Rumah  >  Soal Jawab  >  teks badan

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;
    }
}

P粉904450959P粉904450959263 hari yang lalu437

membalas semua(1)saya akan balas

  • P粉642436282

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

    Rakan yang dihormati, terdapat masalah dengan pertanyaan media CSS anda. 

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

    }

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

    Saya menukar pertanyaan media kedua kepada 1024px agar sesuai dengan saiz tablet. Anda harus membuat pertanyaan media baharu untuk skrin yang lebih besar seperti lebar min 1025px

    balas
    0
  • Batalbalas