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媒體查詢不加載

回答

相關問題