引導：@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上

回答

相關問題