將css媒體查詢應用於響應式設計時，css發生更改

Question

我正在將CSS媒體查詢應用於我的網站，使其既可以在移動設備上也可以在筆記本電腦上工作。 我正在使用以下媒體查詢進行移動

@media only screen and (min-device-width : 321px) and (max-device-width:480px)

和以下筆記本電腦

@media only screen and (min-device-width: 1100px)

問題是，當我對移動設備應用第一個查詢，對筆記本電腦應用第二個查詢時，移動用戶界面正確，但筆記本電腦用戶界面顯示不同的結果。當我從列表中刪除移動CSS時，僅保留第二個查詢CSS。筆記本電腦用戶界面正確。

請指導我我做錯了什么...

Answer 1

將其包括在<head></head> （如果沒有的話）

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

更改您的@media樣式，//根據您的要求更改寬度

@media only screen (max-width: 500px) {
 // or as per your needs, as I try to explain below
}

現在我嘗試解釋一下.. :)

@media (max-width:500px)

您要應用這些樣式的max-width為500px的窗口。 在這種情況下，大多數情況下，您所談論的都是小於桌面屏幕的任何東西。

@media screen and (max-width:500px)

對於具有max-width為500px的screen和窗口的設備，將應用樣式。 這與上面的幾乎相同，不同的是您要指定screen ，而不是要print的其他介質類型。

@media only screen and (max-width:500px)

這是直接來自W3C的引文來解釋這一點。

關鍵字“ only ”也可以用於向較舊的用戶代理隱藏樣式表。 用戶代理必須處理以'only'開頭的媒體查詢，就像沒有'only'關鍵字一樣。

由於沒有“ only ”這樣的媒體類型，因此較舊的瀏覽器應忽略樣式表。

我嘗試將一些更多信息從網絡上收集到這里。

@media all and (min-width: 500px) {
}

@media all and (max-width: 500px) and (min-width: 300px) {
}

@media all and (max-width: 299px) {
}

If

那就是媒體查詢：邏輯if語句。 “如果”對於瀏覽器而言是正確的，請使用內部的CSS。

And

關鍵字和。

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Or

逗號分隔。

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

從技術上講，它們被視為類似於分隔媒體查詢，但這實際上是和或。

Not

使用關鍵字not反轉邏輯。

@media not all and (max-width: 600px) {
  html { background: red; }
}

只是不做（最大寬度：600像素）對我來說似乎不起作用，因此上面的語法有點時髦。 也許有人可以向我解釋。 請注意，這不僅適用於當前的媒體查詢，因此，如果用逗號分隔，則只會影響其中的媒體查詢。 還要注意，不要顛倒整個媒體查詢的邏輯，而不是整個查詢的邏輯。 不是x和y =不是（x和y）≠（不是x）和y

獨家

為了確保一次僅執行一次媒體查詢，請盡可能地打一些數字（或其他數字）。 以這種方式在心理上進行管理可能會更容易。

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

從邏輯上講，這有點像switch語句，只是沒有一種簡單的方式來執行“如果這些都不匹配，則執行此操作”，就像默認值一樣。

覆寫

沒有什么可以阻止一個以上的媒體查詢同時為真。 在某些情況下使用此功能可能比使它們全部排他性更為有效。

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

媒體查詢沒有為它們包含的選擇器添加任何特定性，但是源順序仍然很重要。 上面的方法將起作用，因為它們的訂購正確。 交換該順序，在瀏覽器窗口寬度超過800px時，背景可能是紅色，可能是出於好奇。

移動優先

小屏幕樣式位於常規屏幕CSS中，然后隨着屏幕變大，您將覆蓋所需的樣式。 因此，一般來說，最小寬度媒體查詢。

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

桌面優先

大屏幕樣式位於常規屏幕CSS中，然后隨着屏幕變小，您可以覆蓋所需的樣式。 因此，一般來說，最大寬度的媒體查詢。

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

您可以隨心所欲地做到這一點。

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

請注意，唯一關鍵字旨在防止不支持媒體查詢的瀏覽器不加載樣式表或使用樣式。 不確定曾經/現在仍然有用。

對於媒體查詢優先級

來源：一個 2 3 4 5

將css媒體查詢應用於響應式設計時，css發生更改

問題描述

1 個解決方案

解決方案1
6 2014-05-02 08:36:56

將css媒體查詢應用於響應式設計時，css發生更改

問題描述

1 個解決方案

解決方案1 6 2014-05-02 08:36:56

解決方案1
6 2014-05-02 08:36:56