媒體查詢div不改變寬度，但其他一切工作

我想調整div的寬度，當瀏覽器使用最大寬度減小大小。該div做一切，但改變寬度。我通過chrome瀏覽器上的開發人員工具查看了它，並且寬度被削減了。怎麼了？媒體查詢div不改變寬度，但其他一切工作

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="responsive.css" /> 
</head> 

<body> 
    <div class="left"> 
    </div> 

    <div class="containerRight"> 
     <div class="incontainer"> 
      <div class="post"> Aifjoisdjfiosjdfoisdjfoidsjfoisjd</div> 
     </div> 
    </div> 
</body> 
</html>

主css：

*{ 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
} 

html, body { 
height:100%; 
} 

body { 
padding:60px 0 0 0; /* 60 — header height*/ 
margin:0; 
} 


.main { 
min-width:100%; 
height:60px; 
margin-top: -60px; /* 60 — header height*/ 
margin-left: -300px; 
border-bottom: solid 1pt #ADADAD; 
} 


.containerRight { 
float:left; 
width:100%; 
height: 100%; 
overflow-y: scroll; 
} 



.left { 
float:left; 
height: 100%; 
width: 300px; 
border-right: solid 1px #C9C9C9; 
-webkit-box-shadow: 1px 0 2px #888888; 
-moz-box-shadow: 1px 0 2px #888888; 
box-shadow: 1px 0 2px #888888; 
}

RESPONSIVE CSS

.left { 
    width: 800px; 
    background-color: red; 
} 

.containerRight { 
    display: none; 
}

來源

2014-10-01 user3173447

什麼是您的媒體查詢？ – Newtt 2014-10-01 13:33:58

media = screen我只是通過改變瀏覽器的大小來測試它。如果我沒有回答你的問題，我很抱歉。我不確切地知道你的意思。 – user3173447 2014-10-01 13:38:38

@ user3173447你的問題說媒體查詢div沒有改變寬度，但在你的描述中，根本沒有媒體查詢 – Huangism 2014-10-01 13:44:47

而不是把media=screen在頭部，爲您responsive.css文件，使用這樣的：

@media (max-width:500px){ 
    .left { 
     width: 800px; 
     background-color: red; 
    } 

    .containerRight { 
     display: none; 
    }

}

點擊瞭解媒體查詢的基礎知識：和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。這應該有助於你開始。

來源

2014-10-01 13:49:42 Newtt

它應該在''中工作，就像你在Moz-Dev鏈接的第一個例子中看到的那樣。我認爲它應該是'min-width'而不是max，儘管如果沒有完整的代碼 – Xareyo 2014-10-01 13:53:22

@Xareyo很難說，你是絕對正確的，它應該。這是一個在CSS中使用它的個人偏好，因爲我覺得它更可靠。 – Newtt 2014-10-01 13:56:18

我認爲這裏的問題的關鍵是**主要的css被包含在哪裏？ – 2014-10-01 13:59:19

媒體查詢div不改變寬度，但其他一切工作

回答

相關問題