我正在尝试在 chrome v28、Firefox v222 和 IE8 上运行这种 CSS 样式:
html, body{
margin: 36px;
width: 100%;
background-color: black;
}
@media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
background-color: red;
}
}
作为标记，我添加:
<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>
只是想了解为什么在我最小化窗口时它没有将颜色更改为红色。
任何帮助都会有很大的帮助。
谢谢 拉惹
最佳答案
#page 没有内容，因此它有 height:0px; 尝试以下操作:( working jsFiddle )
@media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
height:100%; /* set the height */
background-color: red;
}
}
至于问题的补充 - 改变背景 - 你必须像这样颠倒 CSS 的顺序:
<style>
html, body{
margin: 36px; width: 100%; height: 100%;
}
body{ background-color: black; } /* This should be first for the media query to override */
@media screen and (max-width: 768px){
html, body{ margin: 20x; }
body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
}
</style>
关于CSS 媒体类型和查询不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17910848/