Question

我试图在浏览器使用max-width减小大小时调整div的宽度。 div除了改变宽度外还可以做任何事情我通过Chrome浏览器上的开发人员工具查看了它，并且宽度被削减了。怎么了？

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

响应CSS

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

.containerRight {
   display: none;
}

Answer 1

不要将media=screen放在头部，对于responsive.css文件，请使用：

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

    .containerRight {
       display: none;
    }

}

在此处了解有关媒体查询的基础知识：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。这应该可以帮助您入门。

媒体查询div不改变宽度但其他一切都有效

1 个答案: