suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

P粉904450959P粉904450959263 Tage vor441

Antworte allen(1)Ich werde antworten

  • P粉642436282

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

    亲爱的朋友，您的 CSS 媒体查询有问题。

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

    }

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

    我将第二个媒体查询更改为 1024px 以适应平板电脑尺寸。您应该为更大的屏幕创建一个新的媒体查询，例如 min-width 1025px

    Antwort
    0
  • StornierenAntwort