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

Question

PS：我对CSS很陌生，我正在尝试我的头脑来研究一个 移动响应式用户界面，所以如果有什么愚蠢的事情，请饶了我吧！

我有两个设备的宽度和宽度设置为 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;
     }
   }
 }

Answer 2

你可以对这个主题使用"all"。

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
     .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 3

在开发响应式时，您应该事先了解几件事。不要对每个设备都有媒体查询。你最终会

1. 对每个设备进行媒体查询。
2. 代码的可维护性将非常困难，尤其是在扩展时
3. 最终会得到对页面性能不利的大型 CSS 文件。

响应式CSS的最佳方法是遵循首先针对移动设备设计的模式，并随着媒体查询的变大而逐渐进行更改。

      .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: 480px) {
        .un-progress{
          // changes here
        }
        .finished_time{
          // changes here
        }
        .left_time{
          // changes here
        }
      }
    }
    @media (min-width: 768px) {
        .un-progress{
          // changes here
        }
        .finished_time{
          // changes here
        }
        .left_time{
          // changes here
        }
      }
    }
    @media (min-width: 1024px) {
        .un-progress{
          // changes here
        }
        .finished_time{
          // changes here
        }
        .left_time{
          // changes here
        }
       }
     }

（将媒体查询最小宽度更改为适当） 这将为您提供更干净，更轻量级的CSS。