Zweite Medienabfrage wird nicht geladen

Die Medienabfrage mit der minimalen Breite 845px und der maximalen Breite 930px wird im Browser nicht geladen. Mache ich irgendetwas falsch unten?Zweite Medienabfrage wird nicht geladen

@media screen and (max-width:845px){ 
 
    .btn{ 
 
     margin-top: 15px !important; 
 
    } 
 
} 
 

 
@media screen and (min-width:845px) and (max-width:930px){ 
 
    .btn{ 
 
     margin: auto !important; 
 
    } 
 
}

Im Folgenden ist der HTML-Code: Es ist eine einfache AngularJS Seite, die für die Primzahl überprüft, nachdem eine Nummer eingegeben wird. Hinweis: my2.css hat nichts.

<html> 
 
    <head> 
 
     <title>Is It A Prime Number ?</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
     <script src="js/app.js"></script> 
 
     <link rel="stylesheet" href="css/my.css"/> 
 
     <link rel="stylesheet" href="css/my2.css"/> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 
    </head> 
 
    <body ng-app="myapp"> 
 
     <h1 class="display-1" align="center">Angular JS - Prime Number</h1> 
 
     <hr/> 
 
     <div class="col-md-offset-5 col-md-4 col-lg-4" ng-controller="mycontroller"> 
 
      <form class="form-inline"> 
 
       <div class="form-group"> 
 
        <label class="sr-only" for="numberinput">Email number</label> 
 
        <input type="text" class="form-control" id="numberinput" ng-model="no"> 
 
        <input type="button" style="margin: 2px" class="btn btn-primary" ng-click="isitprime()" value="Check"> 
 
       </div> 
 
      </form> 
 
      <br><br> 
 
      <span class="lead" id="spanid" style="color: {{str}}"> 
 
       {{no1}}{{message}} 
 
      </span> 
 
     </div> 
 
    </body> 
 
</html>

Unten ist die Javascript ich verwende:

var obj = angular.module('myapp', []); 
 
obj.controller('mycontroller', function ($scope) { 
 
    $scope.no = ''; 
 
    $scope.message = ''; 
 
    $scope.str = 'black'; 
 
    $scope.isitprime = function() { 
 
     var isPrime = true; 
 
     if ($scope.no == 1) 
 
     { 
 
      isPrime = false; 
 
     } else if ($scope.no == 2) 
 
     { 
 
      isPrime = true; 
 
     } else 
 
     { 
 
      for (var x = 2; x < sqrt($scope.no); x++) 
 
      { 
 
       if ($scope.no % x == 0) 
 
       { 
 
        isPrime = false; 
 
       } 
 
      } 
 

 
     } 
 
     if (isPrime) 
 
     { 
 
      $scope.message = ' is a prime number'; 
 
      $scope.str = 'green'; 
 
     } else 
 
     { 
 
      $scope.message = ' is not a prime number'; 
 
      $scope.str = 'red'; 
 
     } 
 
    }; 
 
});

Unterhalb der Screenshot ist

Quelle

2017-07-15 Pratik Solanki

Wie können wir das Problem reproduzieren, wenn Sie uns nicht die HTML geben? Sehen Sie sich an, wie Sie ein [minimales, vollständiges und verifizierbares Beispiel] erstellen können (https://stackoverflow.com/help/mcve) –

Ihre Medienabfrage ist in Ordnung, aber Ihre margin: auto !important; wird margin-top: 15px !important; überschreiben. Suchen Sie unten nach einer Lösung.

@media screen and (max-width:845px){ 
 
    .btn{ 
 
     color: blue; 
 
     margin-top: 15px; 
 
    } 
 
} 
 

 
@media screen and (min-width:845px) and (max-width:930px){ 
 
    .btn{ 
 
     color: red; 
 
     margin-right: auto; 
 
     margin-left: auto; 
 
    } 
 
}

<button class="btn">Hello</button>

Quelle

2017-07-15 17:59:40 Win

Das hat nicht funktioniert. Nachdem ich diese Änderung vorgenommen hatte, speicherte ich sie und lud die Seite neu und ging zur Chrome Developer Console >> Elements >> Styles. Es gab nur eine Medienabfrage, die die erste war, und die zweite Medienabfrage wurde nicht gefunden. –

Wenn Sie die Größe des Fensters ändern, sehen Sie, dass sich die Schaltfläche ändert. Bitte stellen Sie sicher, dass Ihre Fenstergröße zwischen 845px und 930px liegt, sonst wird diese Medienabfrage nicht wirksam. – Win

Es funktioniert in Ihrem Codebeispiel. Ich habe meinen gesamten Code nach der Bearbeitung der Frage eingefügt. Sie können versuchen, herauszufinden, was dort falsch ist. Danke für deine Zeit. –

Zweite Medienabfrage wird nicht geladen

Antwort

Verwandte Themen