媒體查詢影響到桌面版本，但不是移動版本

我有一個CSS媒體查詢，但它似乎混淆了，我不知道爲什麼。這使得桌面版本看起來像我想要的移動版本，移動版本看起來像我想要的桌面。這是有問題的CSS頁面：媒體查詢影響到桌面版本，但不是移動版本

@media (min-width: 500px;) { 
    body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;} 
    .navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;} 
    a:hover{color: #FFFFCC;} 
    a:visited{color: #FFFF1A;} 
} 
@media (max-width: 499px;) { 
    .navigation{width: 100%;} 
    .bio{display: none;}  
}

在HTML的頁面我有這個頭標記中：

<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>

我究竟在做什麼錯？

來源

2016-11-27 Abbey S

刪除媒體查詢中的分號......'@media（max-width：499px）{...}' – Ricky

我會投票結束這個問題，因爲這是一個簡單的印刷錯誤。 – Ricky

@Ricky我在樣式的第二個聲明周圍移除了媒體（max-width：499px;）{}，但它沒有改變任何東西。 –

我想通了。事實證明，我的瀏覽器歷史記錄真的堵塞了，並且正在加載舊版本的網站，同時嘗試將它與新的CSS混合在一起，事情變得混亂起來和奇怪。

清除我的瀏覽器數據解決了這個問題。感謝大家的幫助！

來源

2016-11-27 03:34:43

，你可以嘗試使用 '@media屏幕'

@media screen and (min-width:200px) and (max-width:1000px)

來源

2016-11-27 03:08:01 letxxt

你能否詳細解釋一下 – Danh

這個樣式@media屏幕和（min-width：200px）和（max-width：1000px） – letxxt

變化：

@media (min-width: 500px;) { ... } 
@media (max-width: 499px;) { ... }

要：

@media (min-width: 500px) { ... } 
@media (max-width: 499px) { ... }

來源

2016-11-27 03:12:34 Ricky

這也行不通。 –

卸下分號應該有固定的問題

@media (min-width: 500px) { ... } 
@media (max-width: 499px) { ... }

由於不工作，嘗試添加屏幕

@media screen and (min-width: 500px) { ... } 
@media screen and (max-width: 499px) { ... }

如果不解決您的問題，然後添加一個片段與你的問題

來源

2016-11-27 03:25:12

如果我正確理解你的問題，和我出去在沒有看到代碼的其餘部分的情況下，在你的肢體上，你的響應式佈局可能由於糟糕或缺少視口聲明而被搞亂。

檢查，替換或在您的頭部添加此項。您現在有單引號圍繞它

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

瞭解更多關於它here

而且，與移動優先的方法來構建應用程序

媒體最大= 480 - >做，直到

媒體最大= 768 - >如果需要更改或更改

媒體最多= 989 - >如果需要更改或更改ndin

media max = 1200

來源

2016-11-27 03:30:07 LOTUSMS

html中的單引號是否正確？可能會導致問題？

來源

2016-11-27 03:30:24 JSON

媒體查詢影響到桌面版本，但不是移動版本

回答

相關問題