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

我在新闻网站上使用了bootstrap，但它在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 3

使用它，它应该有帮助

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

Css3媒体查询未加载

3 个答案: