媒體查詢不起作用 - 一個簡單的演示頁面

那麼，在一個簡單的html頁面中，我無法運行媒體查詢。在差距之後，我正在努力解決這些問題，因此我認爲我犯了一個愚蠢的錯誤，我無法弄清楚。媒體查詢不起作用 - 一個簡單的演示頁面

HTML

<div class="resume"> 
    <section> 
     <h2>Info</h2> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a dignissim ipsum. Aliquam venenatis sapien semper, rhoncus nulla nec, feugiat ligula. </p> 
      <div class="spacer"></div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a dignissim ipsum. Aliquam venenatis sapien semper, rhoncus nulla nec, feugiat ligula. </p> 
     </div> 
    </section> 
</div>

CSS

div.resume {width:50%;} 
div.content {padding:10px 10px 25px;} 
div.content p {text-align:justify; line-height:1.2em; font-size:.9em;} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {div.resume{width:100%} } 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { div.resume{width:100%} } 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { div.resume{width:100%} }

這只是從我的頁面，這似乎並沒有工作，一些示例代碼了。我想這裏尋找類似的問題，並在互聯網上，但它看起來像我已經有那些地方一樣，我的頁面有正確的meta標籤的下方，我使用HTML5的doctype

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!DOCTYPE html>

媒體查詢不踢。任何幫助，將不勝感激。

來源

2014-06-16 whyAto8

你不需要在你的類之前使用標籤「div」，也許你正在調整瀏覽器的測試目的，這不會工作，如果你想有一個更動態的效果，你應該使用最小寬度和最大寬度，而不是分設備寬度和最大devide寬度，請注意「設備」這個詞就不會工作，因爲「設備」獲取屏幕的最小寬度，而不是瀏覽器

.resume {width:50%;} 
.content {padding:10px 10px 25px;} 
.content p {text-align:justify; line-height:1.2em; font-size:.9em;} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-width : 768px) and (max-width : 1024px) {.resume{width:100%} } 

/* iPads (landscape) ----------- */ 
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { .resume{width:100%} } 

/* iPads (portrait) ----------- */ 
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { .resume{width:100%} }

來源

2014-06-16 06:03:33 EsopMx

權，這是正確的，它只是錯誤地在這裏出現，否則它在我有大量代碼中有其他目的。無論如何，它似乎並沒有解決問題。 – whyAto8

也許你正在調整瀏覽器的測試目的，這是行不通的，如果你想有一個更加動態的效果，你應該使用min-width-width和max-width-min-device-width和max-devide-width，請注意「設備」這個詞它不工作，因爲「設備」獲得了屏幕的最小寬度，而不是瀏覽器 – EsopMx

賓果！它在刪除設備後完美運行，我明白爲什麼會這樣，可能是爲了我的本地測試，我需要刪除設備。非常感謝。 – whyAto8

媒體查詢不起作用 - 一個簡單的演示頁面

回答

相關問題