html - 媒体查询 "Screen"CSS

Question

我正在尝试在我的 CSS 上设置媒体查询，但它不起作用

#calc{
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
/*background: linear-gradient(#9dd2ea, #8bc);*/
background-image: url('http://thumbs.dreamstime.com/z/christmas-seamless-pattern-big-small-snowflakes-white-cyan-background-34953788.jpg');
border-radius: 15px;
box-shadow: 0px 4px #009de4;
}

这是媒体查询的CSS

@media screen and (min-height: 500px) {
#calc
{
            /*margin-top: 0; or margin: 0 auto;*/
    margin-top: 0;
}
}

Answer 1

 @media (min-width:0px) and (max-width:767px) {
  #calc{margin-top: 0;}
}

将此代码用于响应式设备。按条件替换