[分享]css不同分辨率技巧

CSS是前端开发中重要的技术之一。在不同分辨率下，CSS运用也有很多技巧。接下来介绍几种CSS不同分辨率技巧。

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
} 

上面代码告诉浏览器，在屏幕宽度小于等于600px时，body的字体大小为14px。

@media (max-width: ***px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: 50%;
  }
} 

上面代码告诉浏览器，在屏幕宽度小于等于***px时，.container的布局为flex，并且.item的宽度为50%。

@media (min-width: 768px) and (max-width: 992px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
} 

上面代码告诉浏览器，在屏幕宽度在768px和992px之间时，.container的最大宽度为720px，并且左右居中。

除了上面的技巧，还有很多CSS不同分辨率的技巧，前端开发人员需要熟练掌握。