Media query div not changing width but everything else works

问题

I am trying to adjust the width of a div when the browser decreases in size using max-width. The div does everything but change width. I have looked at it through the developer tools on the chrome browser and the width is slashed out. What's wrong?

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>

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

回答1:

Instead of putting the media=screen in the head, for your responsive.css file, use this:

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

    .containerRight {
       display: none;
    }

}

Learn the basics about media queries here: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. This should help you get started.

来源：https://stackoverflow.com/questions/26142610/media-query-div-not-changing-width-but-everything-else-works

标签

html

css

width

media-queries