我的媒體查詢無法正常工作，尤其是風景

我正在處理一個標題的媒體查詢，但媒體查詢不起作用。如果我正確修復了某個設備的媒體查詢，那麼它在我的設備上無法正常工作。這裏是我的代碼...我的媒體查詢無法正常工作，尤其是風景

@media (max-width: 499px) { 
    .mission h1 { 
     font-size: 10px; 
     margin-right: 550px; 
     margin-top: -15px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 10px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 6px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 5px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 610px) { 
    .mission h1 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-top: -15px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 10px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 7.5px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 700px) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 700px) and (orientation: landscape) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media tv and (min-width: 700px) and (orientation: landscape) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (max-width: 860px) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: -20px; 
     ; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 8px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
}

，我試圖解決我的問題一點點，因爲它沒有響應我想要什麼上面的代碼。我的網站是現場直播，可以通過鏈接在線解僱。 http://www.ericsbo.se/ 我通常通過網站在線查看我的網站的響應能力。如果有任何一個檢查可以發現一些錯誤。網上檢查網站可以在這裏找到http://www.isresponsive.com/

來源

2016-09-26 ziaullahzia

您是否試過用最小寬度設置最大寬度限制？例如'@media（min-width：700px）和（max-width：800px）' – Matthew

是的，我做到了..我會再試一次。 – ziaullahzia

閱讀更多參與回覆的答案。 – Matthew

好了，所以我做了一些測試，我知道爲什麼它是做什麼的，因爲最大寬度手段，「如果[寬度]小於或等於到[最大寬度]返回true「。

認識到這一點，我們讀到這樣的查詢：

is 300px <= 499px (returns true)

is 300px <= 800px (returns true)

因此，在這種情況下，既會返回true，我相信在CSS後者的代碼將有更大的優先級，並會否決之前的代碼。所以，你可以關掉這個與最小寬度完成它，設定一些界限（我在評論建議）或我相信，如果你把min-width:499px邏輯語句後的min-width:800px邏輯語句它應該工作。

編輯：對於景觀，我想我可以考慮的最佳方式（我一段時間沒有這樣做）將分配邏輯陳述給你不想運行的每個人在景觀模式下and not (orientation: landscape)所以它不會被觸發。可能是更好的方法，但你必須做一些研究。這是一個很好的信息頁面。 CSS Tricks

來源

2016-09-26 02:24:46 Matthew

我做了一些研究，並得出結論，幾乎涵蓋所有媒體設備的最精確的媒體查詢如下。

@media only screen and (min-width: 150px) and (max-width: 600px) { 
/****** @Style ******/ 
{ 

@media only screen and (min-width: 761px) and (max-width: 1200px) { 
    /****** @Style ******/ 
}

來源

2016-11-17 13:25:42 ziaullahzia

我的媒體查詢無法正常工作，尤其是風景

回答

相關問題