2014-10-08 82 views
2

下午好,響應式設計與媒體查詢不切換

我想使我的網站響應,但我無法得到它的工作。我一直在Google上搜索大約一個小時或三個,我幾乎肯定我沒有做錯,但它不起作用。

這裏是我的代碼:

@media screen and (min-width: 1230px) { 
} 

@media screen and (min-width: 750px) and (max-width: 1229px) { 

    body{ 
    display: none; 
    } 
} 

我最能說明問題的最好辦法是,當我訪問我的網站,瀏覽器全屏它通常加載像我想它,但是當我縮小窗口它應該加載的CSS的其他部分,但只是不加載任何CSS。我把顯示器:沒有在那裏,使頁面是白色的,看看它是否工作。

我有 <meta name="viewport" content="width=device-width" /> 在我的HTML。

網址的網站:http://www.biebvragen.nl

+0

你可以請鏈接我們你的網站有例子嗎? – Supamiu 2014-10-08 13:16:35

+0

@Supamiu是的,當然可以在帖子中添加url – Maantje 2014-10-08 13:17:18

+0

你的代碼工作的很好,我不能看到任何問題,它是很容易的 – himanshu 2014-10-08 13:30:20

回答

0

它與我的Linux iceweasel效果很好,請嘗試使用其他瀏覽器或做一次Ctrl + F5鍵刷新。

也許清理緩存也可能是解決方案,但是您的代碼運行良好,這不是一個css問題,或者它也不適用於我的瀏覽器。

+0

嘗試了我的所有瀏覽器Firfox chrome和Safari瀏覽器都是相同的問題。你看到一個完全白色的屏幕? – Maantje 2014-10-08 13:42:51

+0

當我進入低分辨率時,我看到一個完全白色的屏幕,並且我看到「Deze網站是niet beschikbaar op deze resolutie。」如果我的分辨率非常低。 – Supamiu 2014-10-08 13:49:10

+0

是的,這是它應該做的:)!爲我工作,現在在我的CSS中切換順序 – Maantje 2014-10-08 13:51:01

1

不確定是否允許回答我自己的問題,但它現在起作用!

相反的:

@media screen and (min-width: 1230px) { 
} 

@media screen and (min-width: 750px) and (max-width: 1229px) { 

body{ 
display: none; 
} 
} 

我把它改爲:

@media screen and (min-width: 750px) and (max-width: 1229px) { 

body{ 
display: none; 
} 
} 
@media screen and (min-width: 1230px) { 
} 

而且似乎現在工作得很好!