當應用css媒體查詢進行響應式設計時，css被更改

我正在爲我的網站應用css媒體查詢，以便在移動設備以及筆記本電腦中工作。我米使用下列媒體查詢移動當應用css媒體查詢進行響應式設計時，css被更改

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

及以下筆記本電腦

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

問題是，當我申請我的第一個查詢移動，和第二個筆記本電腦，移動設備用戶界面是正確的，但筆記本電腦的用戶界面顯示不同的結果。當我從我的列表中刪除移動css，並保持只有第二個查詢css.laptop UI是正確的。

請指引我在那裏即時做錯了......

來源

2014-05-02 user3575612

包括這<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)

與一個screen的設備並用500pxmax-width窗口應用的樣式。除了你指定的是screen而不是other media types以外，其他的最常見的是print。

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

這是直接來自W3C的quote來解釋這一個。

關鍵字'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

使用關鍵字不反轉邏輯。

@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; } 
}

注唯一的關鍵字是爲了防止非媒體查詢支持的瀏覽器不加載樣式表或使用的樣式。不知道這是多麼有用/仍然是。

And for media queries priorites

來源：由你one two three four five

來源

2014-05-02 08:36:56 4dgaurav

非常有幫助的文章先生。我糾正了我的問題，居然有一個大括號額外的CSS文件中提供，這是產生問題。但是我將設計進一步只與你的aticle ... – user3575612

我的榮幸.. :) – 4dgaurav

當應用css媒體查詢進行響應式設計時，css被更改

回答

相關問題