引导：@media最小宽度和最大宽度不会在iPad上

我试图使课堂“PAD1”在我的iPad（其中有768px宽）工作的工作，引导：@media最小宽度和最大宽度不会在iPad上

所以，我想这个代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

</head> 

<body> 

<style> 
@media (min-width: 767px) and (max-width:991px){ 
    .pad1 { 
     margin-top: 150px; 
    } 
} 

</style> 

<div class="container"> 

    <div class="row pad1"> 

    <div class="col-sm-4" style="background-color: orange;"> 

    AAAAA 

    </div> 

    </div> 

</div> 

</body> 

</html>

但填充是不行的，而如果我删除and (max-width:991px)部分它的工作原理..

我也试着从不同的职位一些其他的解决方案，如：

@media only screen and (min-device-width: 767px) and (max-device-width: 991px) and (orientation:portrait) { 

    .pad1 { 
     margin-top: 150px; 
    }

但它仍然无法正常工作，我被困在这里，我绝对需要限制这个班级的max width，你有什么解决方案吗？

谢谢

来源

2017-06-05 aurelSon

看起来像是一个特殊问题 - 如果给规则添加一个'！important'会发生什么？ –

尝试使用'（max-width：767px）' – Swellar

@TiesonT。我只是试图添加'！重要的'它不起作用 – aurelSon

更改为：

@media all and (min-device-width:767px) and (max-device-width:991px){ 
    .pad1 { 
     margin-top: 150px; 
    } 
}

我希望帮助你。

来源

2017-06-05 08:33:34 Ehsan

引导：@media最小宽度和最大宽度不会在iPad上

回答

相关问题