css不同分辨率盒子大小不一样

在不同分辨率下，网页显示的效果会有所不同。如果使用了固定宽高的盒子，会导致在小屏幕下盒子溢出或者过小，在大屏幕下则会显得过于拥挤。这时候，可以使用CSS的一些特性，让盒子根据不同分辨率自适应大小。

@media screen and (max-width: 768px) {
  .box {
    width: 90%;
    margin: auto;
  }
}
@media screen and (min-width: 768px) {
  .box {
    width: 50%;
    margin: auto;
  }
} 

上面的代码使用了媒体查询@media，分别对小于768px和大于768px的屏幕进行了适配。当屏幕宽度小于768px时，盒子宽度为父元素宽度的90%；当屏幕宽度大于等于768px时，盒子宽度为父元素宽度的50%。

除此之外，还可以使用rem单位，以根元素字号为基准来计算盒子大小，适配不同屏幕。也可以使用百分比等其他CSS单位，来实现响应式布局。