Question

我从其他地方复制了一些媒体查询代码，这些代码工作得非常好，但是在合并到我自己的项目中时，它似乎无法正常工作。

我查看了之前的stackoverflow问题，并尝试实现修复或测试，例如，

通过应用不需要的背景颜色来检查媒体查询是否正常工作。我还确保添加了viewport metatag。

这是我的媒体查询

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { 

body { margin: 5px; width: 5px; }

.testimonial {

            background-color: black;
        }


 }

可在此处查看实时页面（点击推荐，然后点击图片）：http://krmmalik.com/me/

更新刚刚与同事交谈过，他似乎认为媒体查询无效的原因是因为推荐内容正在iframe中加载，此时媒体检测不会发生了吗？

Answer 1

我试过这个并且它完美地运作如果最大宽度应为479px，为什么要将体宽设置为5px？

@media screen and (max-width: 479px){
   body { 
     margin: 5px;
   }
   .testimonial {
     background-color: #000;
   }
 }

非常简单的媒体查询不起作用

1 个答案: