css - 留给纵向和横向的移动响应设计

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