求解 CSS Media Queries 的詭異問題...

小弟的網頁RDW，
大體上看來沒什麼問題，
但有一天在用筆電開的時候突然發現:
瀏覽器視窗寬度拉到中斷點的時候，
(底下原始碼設定是480px、1024px，一共三個樣式表)
會有 完全套不到CSS 的狀況，
雖說範圍很小，要重現狀況還得很仔細地拉視窗尺寸，
但如果剛好有那個尺寸的裝置就不好笑了，

中間那個樣式表改成範圍重疊也沒用(481px,1023px -> 480px,1024px)
測試過Chrome 55、Firefox 50、IE 11、Edge 都是一樣的狀況，
上網查過教學的寫法也是這樣啊?
真心不明白問題在哪...
盼各位大神求解!!!

以下是Head的寫法:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>無解網頁</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>

<link rel="stylesheet" href="L.css"
(min-width:1024px)</font>"/>

<link rel="stylesheet" href="M.css"
(min-width:481px)</font> and (max-width:1023px)"/>

<link rel="stylesheet" href="S.css"
(max-width:480px)</font>"/>




(附註:沒有使用 JavaScript 來 RWD)