媒体查询样式未应用于桌面和平板电脑,但在移动设备

时间:2016-10-14 20:53:09

标签: javascript css3 media-queries

我正在使用移动优先设计设计多列页面。所以我的默认设计是针对移动设备,我使用媒体查询将设计扩展到平板电脑和移动版本。我在我的index.html文档中包含了我的元标记,但我的媒体查询样式未应用于chrome dev工具甚至实时网页上的平板电脑和桌面视图。我正在使用Sass。

我需要帮助才能知道我的代码无效的原因。

 #app-container {
    max-width: 100%;
    border: 1px solid $blue-color;
    height: 80vh;
    margin: 3%;
    display: block;

      .shirt-container {
         width: 90%;
         border: 1px solid $pink-color;
         margin: 10% auto;
         height: 60vh;
         display: block;
      }
   } 

@media screen and (min-width: 480px) {
    #app-container {
         display: inline-block;

       .shirt-container {
           width: 50%;
           display: inline-block;
       }

    }
}  

0 个答案:

没有答案