Question

我已经开始为页面的响应式设计设计媒体查询。我写了2个媒体查询，如下：

      @media only screen and 
      (min-device-width : 320px)and 
      (max-device-width : 480px) {
        #loginTable {
          margin-left: 27%;
        }

        .slider-wrapper {
          margin-left: 23%;
          margin-top: 5%;
          width: 52%;
          }

        .descriptionText1 {
          margin-left: 12%;
          font-size: 59%;
          margin-top: 13%;
         }

       .header {
         margin-bottom: 4%;
        }
       .descriptionText2 {
          margin: 5% 0px 15% 12%;
          font-size: 61%;
        }
   }

     @media only screen and 
     (min-device-width : 768px) and 
     (max-device-width : 1024px) {
       #loginTable {
          border-color: rgb(204, 24, 24); 
          margin-top:2%; 
          margin-left: 2%;
        }

      .slider-wrapper {
           margin-left: 47%;
           margin-top: -31%;
       } 

       .descriptionText1 {
          margin-left: 4%;
       }

       .descriptionText2 {
           margin: 1% 0px 0px 4%; 

        }
 }

两个媒体查询在chrome上工作正常，但第一个媒体查询不能在firefox上运行，而第二个查询在firefox上按预期提供输出。我尝试仅使用黑客进行第一次媒体查询，

               <style>
                 @-moz-document url-prefix() {
                     <link rel="stylesheet" type="text/css"               href="css/responsive.css">
                  }
               </style>

但第二个查询在chrome和firefox上运行正常，没有黑客攻击。所以我认为黑客不是解决方案。请帮忙。

感谢

两个媒体查询，相同的样式表，均可在Chrome上使用，仅适用于Firefox

0 个答案: