设置为纵向和横向的移动响应式设计

Question

我正在从事移动响应式设计，它适用于纵向和横向移动设备。

我在下面给出了覆盖样式。

@media (max-width: 360px) {
     #footer {
         .dropdown-menu {
               left: 33% !important;
          }
     }

 @media (max-width: 480px) {
     #footer {
         .dropdown-menu {
               left: 27% !important;
          }
     }


@media (max-width: 320px) {
     #footer {
         .dropdown-menu {
               left: 13% !important;
          }
     }
@media (max-width: 767px) {
     #footer {
         .dropdown-menu {
               left: 18% !important;
          }
     }

但这不起作用，对于 320 宽度，767 左侧样式正在应用。

请建议我如何使用它在纵向和横向的移动设备上工作？

Answer 1

您必须像这样将顺序从最高宽度反转到最低宽度：

@media (max-width: 767px) {
  #footer {
       .dropdown-menu {
           left: 18%;
       }
  }
}

@media (max-width: 480px) {
  #footer {
     .dropdown-menu {
           left: 27%;
      }
  }
} 
@media (max-width: 360px) {
  #footer {
     .dropdown-menu {
           left: 33%;
      }
  }
}
@media (max-width: 320px) {
  #footer {
     .dropdown-menu {
           left: 13%;
      }
  }
}

另外，我认为最好不要使用!important 覆盖属性，而是使用选择器。