在纵向和横向中将左侧设置为移动响应式设计

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来覆盖属性，而是使用选择器。