Question

最小宽度为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';
        }
    };
});

下面是截图：

Answer 1

您的媒体查询没问题，但您的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>

第二个媒体查询没有加载

1 个答案: