css - 如何为不同的屏幕宽度和高度设置断点

Question

PS: I'm very new to CSS and I'm trying my head around to work on a mobile responsive UI, so please spare me if anything silly!

我有两个设备，它们的宽度和宽度设置为360X640和375X667。我正在尝试使用 @media 为这些编写 css，但无法使其工作。我设置的断点似乎不能正常工作。下面是我的代码

@media(max-width: 360px){
  .un-progress{
    height: 10px !important; 
    margin-top: -0.325em;
    margin-left: -2.75em;
    margin-right: 1.5em;
  }
  .finished_time{
    margin-left: 6.25em;
    margin-top: -0.8em
  }
  .left_time{
    margin-left: 22.0em;
    margin-top: -2.5em;
  }
}


@media (min-width: 361px) and (max-width: 375px){
  .un-progress{
    height: 10px !important; 
    margin-top: -0.325em;
    margin-left: -2.75em;
    margin-right: 1.5em;
  }
  .finished_time{
    margin-left: 6.25em;
    margin-top: -0.8em
  }
  .left_time{
    margin-left: 22.0em;
    margin-top: -2.5em;
  }
}
}

Answer 1

尝试使用下面的 css。

media only screen
  and (max-device-width: 360px){
      .un-progress{
           height: 10px !important; 
           margin-top: -0.325em;
           margin-left: -2.75em;
           margin-right: 1.5em;
      }
     .finished_time{
        margin-left: 6.25em;
        margin-top: -0.8em
      }
      .left_time{
        margin-left: 22.0em;
        margin-top: -2.5em;
      }
}


@media only screen
   and (min-device-width: 361px) 
   and (max-device-width: 375px){
     .un-progress{
        height: 10px !important; 
        margin-top: -0.325em;
        margin-left: -2.75em;
        margin-right: 1.5em;
     }
     .finished_time{
        margin-left: 6.25em;
        margin-top: -0.8em
     }
     .left_time{
        margin-left: 22.0em;
        margin-top: -2.5em;
     }
   }
 }