第二媒體查詢未加載

最小寬度845px和最大寬度930px的媒體查詢未在瀏覽器中加載。我在下面做錯了什麼？第二媒體查詢未加載

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

下面是HTML代碼：它是一種簡單的angularjs頁面輸入數字後檢查素數。注意：my2.css沒有任何內容。

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

下面是我使用的JavaScript：

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

下面是截圖：

來源

2017-07-15 Pratik Solanki

我們怎樣才能重現該問題，如果你不給我們的HTML？看看如何創建一個[Minimal，Complete，and Verifiable example]（https://stackoverflow.com/help/mcve） –

您的媒體查詢正常，但您的margin: auto !important;將覆蓋margin-top: 15px !important;。請看下面的修復。

@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>

來源

2017-07-15 17:59:40 Win

這沒有解決。編輯完成後，我保存並重新加載頁面，然後進入Chrome開發者控制檯>> Elements >> Styles。只有一個媒體查詢是第一個媒體查詢，第二個媒體查詢未找到 –

如果調整窗口大小，則可以看到該按鈕正在更改。請確保您的窗口大小在845px和930px之間，否則您將看不到此媒體查詢生效。 – Win

它在你的代碼示例中工作。編輯問題後，我已經包括了我的所有代碼。你可以試着找出那裏有什麼問題。感謝您的時間。 –

第二媒體查詢未加載

回答

相關問題