媒体查询无响应答案

【问题标题】：media query non responsive媒体查询无响应
【发布时间】：2016-07-11 18:50:41
【问题描述】：

好的，所以我已经有一段时间没有使用媒体查询了，但我相信我做得正确。我没有使用 sass 或更少，只是普通的旧 css。

.btn-test {
    border-radius: 2px;
    border: 1px solid #2e70a4;
    color: #fff;
    font-size: 12px;
    background: #2c83c9;
    position: relative;
    transition: all .2s ease;
    display: inline-block;
    text-decoration: none;
    margin: 18px 9px 0 0;
    padding: 5px 9px 0 9px;
    height: 37px;
    line-height: 16px;
    text-align: center;
}


@media only screen
and (min-device-width: 850px)
and (max-device-width: 1050px)
{
    .btn-test {
        line-height: 34px;
        font-size: 8px;
    }

    .arrow-call-to-action {
        font-size: 8px;
    }

    .call-to-action-list p {
        font-size: 8px;
    }
}

所以我将屏幕设置为 900，其中媒体查询应该处于活动状态，但是我看不到任何变化，我这样做正确吗？

谢谢。

已添加更新 HTML

 <li>
                <div class="t4 arrow-call-to-action">
                    somthing
                </div>

                <div class="t5">
                    <p>text
                        <br>more text<br>
                    </p>
                </div>

                <div class="t6">
                    <a href="#" class="btn-test"
                       id="some-tracking-id">Buy Now
                    </a>
                </div>
            </li>

【问题讨论】：

向我们展示 html 部分以及您使用的任何小提琴或 html 页面的示例
Np，我可以在 HTML 中添加
device-width 带有修饰符 min 和 max 已弃用，不应再使用。请改用width（max-width 和min-width）。 developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width
请参考此链接以获取响应式媒体查询stackoverflow.com/a/35605310/5383669
啊，完美，哈哈，我说过有一段时间了。谢谢你，再加上一个信息和链接

标签： html css responsive-design media-queries

【解决方案1】：

如果您想通过调整浏览器窗口大小进行测试，请使用 min-width 和 max-width。 Min-device-width 不会受到调整大小的影响，因为设备没有改变大小。

【讨论】：

谢谢，完美，不知道已弃用的更新

【解决方案2】：

试试这个

@media (min-width: 850px) and (max-width: 1050px){}

【讨论】：

加1但恐怕还是先感谢

【解决方案3】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->

<!-- Optional theme -->

<!-- Latest compiled and minified JavaScript -->

<style>
.btn-test {
    border-radius: 2px;
    border: 1px solid #2e70a4;
    color: #fff;
    font-size: 12px;
    background: #2c83c9;
    position: relative;
    transition: all .2s ease;
    display: inline-block;
    text-decoration: none;
    margin: 18px 9px 0 0;
    padding: 5px 9px 0 9px;
    height: 37px;
    line-height: 16px;
    text-align: center;
}


@media only screen and (min-width:850px) and (max-width: 1050px)  {
     .btn-test {
        line-height: 34px;
        font-size: 8px;
         background: #fc9;
    }

    .arrow-call-to-action {
        font-size: 8px;
    }

    .call-to-action-list p {
        font-size: 8px;
    }
}
</style>

</head>
<body>
    <div class="container">
    <ul class="" role="tablist">
        <li>
                <div class="t4 arrow-call-to-action">
                    somthing
                </div>

                <div class="t5">
                    <p>text
                        <br>more text<br>
                    </p>
                </div>

                <div class="t6">
                    <a href="#" class="btn-test"
                       id="some-tracking-id">Buy Now
                    </a>
                </div>
            </li>
    </ul>
</div>
<script>
</script>
</body>
</html>

【讨论】：

而且加载顺序也是首选