Html 媒体查询无响应_Html_Css_Responsive Design_Media Queries

Html 媒体查询无响应

html css responsive-design

Html 媒体查询无响应,html,css,responsive-design,media-queries,Html,Css,Responsive Design,Media Queries,好的，我已经有一段时间没有使用媒体查询了，但我相信我做得很正确。我不是在使用sass或者更少，只是简单的旧css .btn-test { border-radius: 2px; border: 1px solid #2e70a4; color: #fff; font-size: 12px; background: #2c83c9; position: relative; transition: all .2s ease; disp

好的，我已经有一段时间没有使用媒体查询了，但我相信我做得很正确。我不是在使用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>


肮脏的
正文

更多文本

如果要通过调整浏览器窗口大小进行测试，请使用

最小宽度

和

最大宽度

Min device width

将不受调整大小的影响，因为设备没有改变大小。

请尝试此操作


文件
.btn测试{
边界半径：2px；
边框：1px实心#2e70a4；
颜色：#fff；
字体大小：12px；
背景#2c83c9；
位置：相对位置；
过渡：所有。2轻松；
显示：内联块；
文字装饰：无；
利润率：18px 9px 0；
填充：5px 9px 0 9px；
高度：37像素；
线高：16px；
文本对齐：居中；
}
@仅介质屏幕和（最小宽度：850px）和（最大宽度：1050px）{
.btn测试{
线高：34px；
字号：8px；
背景:#fc9；
}
.箭头行动呼吁{
字号：8px；
}
.行动呼吁列表p{
字号：8px；
}
}


肮脏的
正文

更多文本

向我们展示html部分以及您正在使用的任何FIDLE或html页面的示例completeNp，我可以在html

设备宽度中添加修改器min
和max
，它们已被弃用，不应再使用。改用width
（max width
和min width）。请参考此链接，以获得响应性媒体查询啊，太好了，哈哈，正如我说的，已经有一段时间了。谢谢你，再加上一个提供信息和链接Hanks，perfect，不知道不推荐使用的updateplus 1，但我恐怕首先感谢你，加载顺序也是首选
@media (min-width: 850px) and (max-width: 1050px){}

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