我用了很多方法，但我无法让这个媒体查询工作。
当我调整窗口大小时，“#Content”并没有改变左边的位置!
一定是让它正确运行的方法!
代码如下:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>index</title>
</head>
<body>
<div id="layout">
<div id="fixed-sidebar">
</div>
<div id="content">
content to make error visible !
</div>
</div>
</body>
</html>
样式.css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#layout {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#fixed-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 460px;
background-color: rgb(33, 40, 46);
overflow: hidden;
padding: 20px;
color: white;
}
#content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 460px;
overflow-y: scroll;
padding: 20px;
background-color: lightgrey;
}
@media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#Content { left: 460px; }
}
@media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#Content { left: 40%; }
}
这是一个 jsfiddle:http://jsfiddle.net/X3U2f/1/
我做错了什么？ :/
(PS:我试着把它们放在重要的位置，但仍然忽略了左边的位置!)
谢谢
最佳答案
“我做错了什么？:/”
您在 @media 规则中使用大写的 'C' 作为 ID，但是 class和 ID属性值为 case-sensitive在 HTML 中，因此您需要将 #Content 更改为 #content:
@media screen and (min-width: 1151px) {
#fixed-sidebar { width: 460px; }
#content { left: 460px; }
}
@media screen and (max-width: 1150px) and (min-width: 700px) {
#fixed-sidebar { width: 40%; }
#content { left: 40%; }
}
关于html - 媒体查询，更改左侧位置不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17119938/