CSS媒體查詢無法在任何地方工作

我想爲不同的佈局使用不同的CSS樣式表（因爲您已經從標題中猜到了），但不幸的是沒有任何工作。CSS媒體查詢無法在任何地方工作

我試圖加載CSS文件

<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

在meta標籤，我在主css文件使用

@media (min-width: 401px) and (max-width: 800px) { 
.page{max-width:730px; margin:0 auto; display: block; height:850px; float:left; } 
    }

也試過，但沒有發生變化。

這是我的頭看起來像：

<link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/image-slides.css" type="text/css"> 
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" /> 
    <link rel="stylesheet" href="css/main.css" type="text/css" /> 
    <link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

，我試圖改變CSS屬性是一個簡單的div的寬度，所以當我調整瀏覽器沒有任何反應。

我的代碼有什麼問題？

來源

2013-08-27 dll_onFire

你能與jsfiddle.com或jsbin.com重現此？ – Znarkus

沒有。對不起 –

你在試用這個瀏覽器？當你檢查頁面div，你的風格是否被覆蓋，或者根本沒有出現 – Huangism

你可以簡單地嘗試像下面，使您的網站代碼響應在手機視圖上進行更改以及在調整大小時，我不認爲代碼中的錯誤發生在哪裏，但給定的代碼爲我工作很好：

<link rel='stylesheet' media='screen and (max-width: 700px)' href='stylesheets/narrow.css' /> 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' /> 
<link rel='stylesheet' media='screen and (min-width: 901px)' href='stylesheets/wide.css' />

來源

2013-08-27 16:33:22

是您的HTML正確設置爲這樣：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Title</title> 
</head> 
<body> 
    //stuff 
</body> 
</html>

用途：

@media screen and (min-width: 401px) and (max-width: 800px) { … }

相反的：

@media (min-width: 401px) and (max-width: 800px) { … }

來源

2013-08-27 16:32:48

還沒有在Firefox中工作。 –

這讓我感到很尷尬，因爲我只想記住我錯過了我的''tag ... – armadadrive

試試這個

@media all and (min-width: 401px) and (max-width: 800px) { 
    /*your code here*/ 
}

來源

2013-08-27 17:10:17

-1

<meta name="viewport" content="width=device-width">

Here就是一個例子。它是敏感的設計。

來源

2013-08-28 08:40:55

我認爲這是訂購代碼的方式。

原始CSS代碼應先放入，然後其他屏幕@media按大小排序：

...original CSS code... 

@media(max-width:300px) {...} 

@media(max-width:533px) {...} 

@media(max-width:640px) {...}

來源

2015-07-11 13:54:17

CSS媒體查詢無法在任何地方工作

回答

相關問題