Css3媒体查询不加载

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

/* 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;  
    } 
}

来源

2012-08-17 acctman

您是否为其他设备/屏幕设置了相同的样式？ – Lukas 2012-08-17 07:47:02

请检查您的覆盖媒体查询css后，你原来的风格。 – sandeep 2012-08-17 08:24:12

@KyleSevenoaks这是错误的，视网膜iPad返回相同的屏幕尺寸，只有密度的变化。媒体查询处理相同。 – LeBen 2012-08-17 08:32:48

利用这一点，应该可以帮助

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

来源

2012-08-17 07:49:11 Lukas

仍然没有运气代码没有被读取 – acctman 2012-08-17 10:58:57

尝试把这个在你的页面的头部。

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

来源

2012-08-17 07:55:51 Burntime

我的所有媒体查询都被完全忽略，直到我添加了这个元标记，谢谢！ – aesede 2015-09-21 15:50:26

如果你想这个@media查询重写一些其他的CSS规则（不适用于iPad的），所以应该放在这些规则后，或使其更具针对性。

来源

2012-08-17 08:18:00 keaukraine

我已经通过简单的背景更改测试了媒体查询并且它可以工作。我想你是正确的。 – LeBen 2012-08-17 08:33:35

我在一个新闻网站使用引导，但它不能在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。

来源

2013-08-31 10:16:55 user1290329

Css3媒体查询不加载

回答

相关问题