css - Css3媒体查询未加载

Question

我将此媒体查询添加到我的主 css 文件中。当我尝试在我的 ipad 上加载页面时，我没有得到下面的样式化媒体查询。为什么会发生这种情况？

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #main_rgt {
        width: 440px;
        height: 495px;
        float: left;
        overflow: visible;
    }
    .chkbox3 .chkpos {
        float: right;
        margin-right: 10px;    
    }
}

Answer 1

尝试将其放在页面的顶部。

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

如果您希望此 @media 查询覆盖其他一些 CSS 规则（不适用于 iPad），则应将其放在这些规则之后，或者使它们更具体。

Answer 3

我在新闻网站上使用了引导程序，但它在 IE8 上不起作用，我使用 css3-mediaqueries.js javascript 但仍然无法正常工作。如果您希望媒体查询与此 javascript 文件一起使用，请将屏幕添加到 css 中的媒体查询行

这是一个例子：

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css 链接行与上面的行一样简单。这就像我相信上帝一样强大：D。

Answer 4

使用这个，它应该有帮助

@media only screen and (min-width: 768px) and (max-width: 991px) {
    enter style here
}