@media屏幕CSS屬性不起作用

我加了@media screen css努力改變我的網站，但它似乎並沒有迴應。我在HTML中添加了meta name = "viewport" content="width=1200, width=device-width"，這是唯一影響我的網站在手機上顯示的方式。在CSS中，我添加了以下內容，但它沒有效果。@media屏幕CSS屬性不起作用

@media screen 
and (max-device-width: 768px) 
and (orientation: portrait) { 
    body { 
    max-width: 600px; 
} 
    #sidebar { 
    width: 0; 
    } 
} 

@media screen 
and (max-device-width: 1000px) 
and (orientation: landscape) { 
    body { 
    max-width: 800px; 
    } 
    #sidebar { 
     width: 0; 
    } 
}

所以，我該怎麼辦：

得到這個工作，是我的CSS錯了嗎？
有沒有一種方法來專門擺脫#sidebar在@media screen css？

來源

2013-03-07 London804

'display：none;'優於'width：0;'。但是你的代碼仍然應該工作。 – stackunderflow 2013-03-07 03:51:27

你能給你一個你試過的網站的鏈接嗎？ – Michel 2013-03-07 06:12:33

試試這個（未測試）

@media handheld and (orientation: landscape), 
    screen and (max-width: 1000px) { 

body { 
    max-width: 800px; 
    } 

#sidebar { 
    width: 0; 
} 

}

來源

2013-03-07 03:53:17 iConnor

沒有沒有工作的任何其他建議？ – London804 2013-03-07 05:06:38

以及它應該工作所以無論什麼不對別的地方，或者嘗試使用EM的和做提琴 – iConnor 2013-03-07 06:01:24

那麼是什麼原因呢？ – iConnor 2013-03-16 14:01:31

這可能是你的CSS文件的舊版本（變更前）已經由您的手機緩存。如果你有PHP，一個很好的解決方法是：

<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">

這樣，樣式表只有在需要的時候纔會重新下載。

如果您沒有PHP，每次您在CSS文件中進行更改時，都可以隨時手動更改?ver=參數。

這可能是也可能不是你的問題，我不知道。但它可能有幫助。

來源

2013-03-07 03:53:31 stackunderflow

不，我刪除了Safari瀏覽器上的cookies和歷史記錄，也嘗試過在我父親的網站上。 CSS是正確的，但對嗎？ – London804 2013-03-07 04:54:48

是的，我是這麼認爲的......它的緩存你會想刪除，而不是cookies和歷史記錄。 – stackunderflow 2013-03-07 04:58:55

是啊，這樣做沒有運氣 – London804 2013-03-07 05:18:34

代碼看起來沒問題。你有嘗試過硬刷新嗎？

shft + f5以我的經驗修復CSS，當你沒有注意到應用的設置。同樣刪除緩存也有幫助！

也擺脫#sidebar

#sidebar{ 
    display:none; 
}

將其隱藏，當你打你的@media。希望可以幫到:)

來源

2013-03-07 06:06:30

是啊，我刪除了我的手機和電腦上我的緩存，它似乎沒有效果。感謝#sidebar位，我還有其他地方，在我的代碼中，我本應該把它放在那裏。在我的html中還有什麼我需要添加的嗎？ – London804 2013-03-07 19:11:22

我改變了邊欄位，並擺脫了它。謝謝你在我的代碼其他地方很有趣我做到了，但完全忘記了這裏。 – London804 2013-03-07 19:35:52

看來，我需要擺脫content =「width = 1200」。在Chrome移動設備上，Safari移動設備實現了所需的寬度，但這並不完美，但現在足夠好了。我會繼續鼓搗它。 @media屏幕是不是假設在筆記本電腦和個人電腦上工作呢？ – London804 2013-03-07 19:42:10

@media對一切都適用。例如我的手機的寬度爲720像素，例如。當你有720px的移動CSS @media;如果有意義的話，下面的CSS將被應用。應該閱讀移動第一響應式設計，如果這是你想要實現的，但這是一個完全不同的話題。至於@media中的代碼，您的目標是移動設備，而不是筆記本電腦/電腦。 Incase你不知道這一點。所以如果我認爲正確的話，CSS將僅適用於移動設備。對於筆記本電腦/ pc，@media（max-width：xxxpx）{}會這樣做:)

來源

2013-03-08 02:01:14

謝謝Akira Dawson的顯示部分。看來我需要擺脫content =「width = 1200」才能在我的iPhone上正確顯示。此外，我最終做的是擺脫@media屏幕，並將其更改爲@media手持設備，以便在我的iPhone上生效。無論什麼原因，@media屏幕將無法使用。這很有趣，因爲我被告知@media掌上電腦在iPhone上不起作用，但顯然它確實如此。

來源

2013-03-09 05:50:57 London804

據我瞭解content="width=1200說，你的網站需要的至少 1200像素視口這是違反max-device-width: 768px

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />或許應該解決您的問題。

來源：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

來源

2013-04-03 23:11:13 Dirk

@media屏幕CSS屬性不起作用

回答

相關問題