[分享]css3宽度大于320时

最近我在学习CSS3的时候，遇到了宽度大于320时的问题。在移动设备上，一般会将宽度设置为320px，因为这是大多数移动设备的宽度。但是，当屏幕的宽度大于320px时，我们需要如何处理呢？media ...

最近我在学习CSS3的时候，遇到了宽度大于320时的问题。

在移动设备上，一般会将宽度设置为320px，因为这是大多数移动设备的宽度。但是，当屏幕的宽度大于320px时，我们需要如何处理呢？

@media screen and (min-width: 321px) {
  body {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
  }
} 

可以将CSS3的媒体查询应用于这种情况。在媒体查询中，我们可以指定最小宽度，然后设置样式。

在上面的代码中，我们指定最小宽度为321px，并将body元素的宽度设置为100%。使用 max-width 属性，我们还将最大宽度设置为768px，并使用margin:0 auto将页面居中。这些样式将在屏幕宽度大于320px时应用。

通过这种方式，我们可以确保在移动设备上，页面只会占用最大宽度320px，而在更大的屏幕上，页面会根据屏幕大小自动调整宽度，以便提供更好的用户体验。