CSS媒體查詢的問題

我想獲得我的應用程序的正確點剎車，所以我可以添加媒體查詢到我的應用程序。我找到了一個名爲http://responsivepx.com/的優秀網站來測試我的應用程序。CSS媒體查詢的問題

我跑過我的應用程序，看到它顯示我的應用程序在1257寬度和1576寬度之間制動，然後我的應用程序將再次罰款。所以我編輯我的查詢來滿足解決方案問題的需求，但仍然無法正常工作？

這裏是querys我目前所面對的：

<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/> 
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />

然後，我已將此添加到媒體querys，它仍然不工作：

<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />

有誰知道原因，我的應用打破了，而不是擊中媒體查詢？

來源

2014-06-05 Ben Clarke

你是什麼意思'沒有擊中媒體查詢'？在這裏，我有點在黑暗中，因爲你沒有給出一個沒有應用或提供任何樣式表內容的示例css規則，甚至沒有提到當你看到問題時你的窗口大小。但是在這裏。

你確定這不是一個優先順序問題嗎？如果您的瀏覽器窗口在1257px和1280px之間，那麼瀏覽器會嘗試應用兩組規則，加載了Common1280Style.css和MaxWidth1280StyleSheet.css兩個樣式表，並且Common1280Style.css中的更具體的規則仍將覆蓋MaxWidth1280StyleSheet.css中的一個。

這假定您按照顯示的順序加載樣式表，例如

<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/> 
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" /> 
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />

爲了說明我的意思，這裏是一個http://codepen.io/anon/pen/Bjwsa通知書（最大寬度：1280）的顏色規則優先於一個（最小寬度：1258px）和（最大寬度：1576px）如果瀏覽器寬度在1258px和1280px之間。因爲它更具體，例如body #example的規則被認爲比僅僅更具體#example

來源

2014-06-05 09:48:43 fracture

CSS媒體查詢的問題

回答

相關問題