使用CSS @media設置斷點以響應屏幕尺寸

Question

我使用'@media only screen and（max-width：500px）'在CSS中設置斷點。

當我將其設置為在達到斷點時更改顏色時，它將起作用：

@media only screen and (max-width: 500px) {#container{color:black;}}

調整瀏覽器大小時，容器div確實會變黑，但是當我設置斷點以更改div的邊距時，不會觸發斷點。

因此，當我將查詢設置為：

@media only screen and (max-width: 500px) {#container{margin-left: 0px;}}

以與測試顏色變化時調整大小時完全相同的方式調整屏幕大小時，沒有任何改變。

主css文件在左邊距設置#container； 18％，當手動將其更改為0px時，確實會將文檔一直移到視口的左側

我嘗試了各種不同的樣式和html元素，但是顏色更改似乎非常可靠，它們幾乎可以任意組合使用，但是調整div的大小或重新定位似乎根本不起作用。 為什么會這樣呢？

回答：

我將@media查詢放在css文件的開頭，當我將它移到css文件的底部時，現在調整了大小。 但這留下了一個問題，為什么它更改了文件開頭的顏色卻沒有調整大小？

Answer 1

您可以像通過媒體查詢來設置背景顏色一樣可靠地更改邊距。

例如：

http://jsfiddle.net/Q55MC/

#container {background: blue; margin: 50px; width: 200px; height: 200px;}

@media only screen and (max-width: 500px) {
    #container{background:black; margin: 0px;}
}

嘗試創建一個演示，以便人們可以更好地了解您要實現的目標。

Answer 2

看起來18％的風格占了上風。

嘗試使用此方法覆蓋它：

@media only屏幕和（最大寬度：500px）{#container {margin-left：0px！important;}}

Answer 3

@viewport元聲明會有所幫助嗎？

使用@viewport CSS聲明優雅地調整頁面大小

請注意，該帖子在應為@viewport時使用@-viewport @viewport