切換樣式表時CSS表格不能改變

我有一些奇怪的問題，我無法弄清楚的CSS表。當窗口變小時，我正在使用以下方式在樣式表之間切換。發生這種情況時，我打算改變頁面元素的排列方式。切換樣式表時CSS表格不能改變

index-large css使配置文件和事件並排顯示，而index-small css使事件顯示在配置文件上方。問題是，當縮小瀏覽器時，轉換正確發生，並且配置文件變得低於事件，但是當再次增加大小時，配置文件仍然低於事件。

我的代碼是：

HTML：

<link type="text/css" rel="stylesheet" href = "index-screen-small.css" media="all and (min-device-width:1000px) and (max-width: 601px)"> 
<link type="text/css" rel="stylesheet" href = "index-screen-large.css" media="all and (min-device-width:1000px) and (min-width: 600px)"> 
... 
<div id = "main"> 
<div id = events></div> 
<div id = break></div> 
<div id = profiles></div> 
</div>

CSS：指數型 - 大：

#main{ 
    display = table; 
} 
#events{ 
    display = table-cell; 
} 
} 
#break{ 
    display = none; 
} 
#profiles{ 
    display = table-cell; 
}

CSS：指數型小：

#main{ 
    display = table; 
} 
#events{ 
    display = table-cell; 
} 
} 
#break{ 
    display = table-row; 
} 
#profiles{ 
    display = table-cell; 
}

我不知道爲什麼會發生這種情況，有任何幫助非常感謝

來源

2014-10-17 user3273450

這可能是我見過的使用媒體查詢的最後端的方式。我建議你對媒體查詢的功能做一些研究https://developer.mozilla.org/en-US/docs/Web /指南/ CSS/Media_queries – mituw16 2014-10-17 00:48:48

我認爲錯誤是在您的媒體查詢。應該是：

<link type="text/css" rel="stylesheet" href = "index-screen-small.css" media="all and (max-device-width:1000px) and (max-width: 600px)">

NOT：

<link type="text/css" rel="stylesheet" href = "index-screen-small.css" media="all and (min-device-width:1000px) and (max-width: 601px)">

這是否對你的工作？

來源

2014-10-17 00:51:53

不幸的是，我只是將其改爲601以試圖使其工作。謝謝你的嘗試！ – user3273450 2014-10-17 02:21:45

是的，沒問題。它與601一起工作嗎？ – 2014-10-17 02:26:48

切換樣式表時CSS表格不能改變

回答

相關問題