CSS3視口解析錯誤

我試着將括號改爲不同的位置。 W3C CSS Validator不接受來自CSS3的以下代碼片段。有人請幫助我確定解析錯誤在下面的一段代碼中的位置嗎？CSS3視口解析錯誤

非常感謝！

@media (min-width: 300px) { 
    @viewport { 
     width: 300px; 
    } 
}

不能嵌套一個@viewport at-rule內media query。媒體查詢控制元素在頁面上以特定寬度顯示的方式，@viewport是<meta name="viewport">的後備。 @viewport應位於媒體查詢之外，位於CSS的基本級別。

話雖如此，@viewport是只有相關處理時使用Internet Explorer的在Windows 8或Windows 10，「啪模式」考慮到這將如何差異小製作，你幾乎可以忽略它完全除非你非常適合針對特定瀏覽器和操作系統的優化標籤控制。

設置一個<meta name="viewport" content="width=device-width, initial-scale=1">的META視口足以處理移動設備上的各種不同的瀏覽器。

假設您只是簡單地嘗試調整頁面上的元素，那麼在處理各種瀏覽器時，您可以直接針對它來處理差異。然後，您可以簡單地依靠常規媒體查詢來設置不同寬度的頁面風格：

@media screen and (min-width: 300px) { 
    #id { 
    width: 300px; 
    } 
}

希望這有助於您！ :)

2017-10-17 01:16:07

我做一個nanodegree的全棧Web開發和轉讓需要所有的瀏覽器和一些倒退的版本中，所有屏幕（RWD）。這段代碼將是我CSS3中的第一行代碼，它不會放置在我的HTML5頁面中。我確實已經在我的HTML5源代碼中提供了您建議的元標記。 –

那你應該沒問題;老實說，我根本不用擔心使用'@ viewport'。儘管你很明顯想使用'@ media'查詢。我建議先用標準媒體查詢（以及HTML''標籤）首先構建網站，然後看看它在Windows上的IE上如何顯示。如果網站顯示正常（99％的機率），則不需要做任何其他事情:) –

在你的html頭部添加元。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

而且你的CSS應該是這樣的

@media only screen and (max-width : 500px) { 
    div { 
    width: 300px; 
    } 
}

2017-10-18 05:44:26

回答