css3媒体查询中device-width和width的区别详解

首先我们来简单介绍一下媒体查询。

媒体查询是CSS3的特性之一，它可以让我们根据不同的设备（如手机、平板、PC等）或不同的浏览器窗口尺寸来定制不同的页面样式和布局。媒体查询根据设备屏幕的宽度、高度或设备的方向等参数来区分不同设备。

在媒体查询中，常用的属性有：width、height、device-width、device-height、orientation、aspect-ratio等。

现在我们来说一下device-width和width的区别。

1. device-width
   device-width指设备屏幕的物理宽度，它是媒体查询中最常用的一个属性。对于各种设备而言，该属性的值不同。例如，iPhone的device-width是320px，而iPad的device-width则是768px。需要注意的是，device-width并不受浏览器窗口大小的影响，它是根据设备本身的物理尺寸来定位的。

2. width
   width指浏览器窗口的宽度，它是媒体查询中另一个常用的属性。width受到浏览器窗口大小的影响，因此它可以用来制作响应式布局（Responsive Web Design）。当浏览器窗口大小改变时，页面的布局和样式都会根据width的值进行调整。

下面我们通过两个示例来进一步说明device-width和width的区别。

示例1：根据屏幕宽度设置不同的背景色

@media (max-width: 767px) {
  body {
    background-color: #f00;
  }
}
@media (min-width: 768px) {
  body {
    background-color: #0f0;
  }
}

在这个示例中，我们使用了两个媒体查询来根据不同的屏幕宽度设置不同的背景色。当屏幕宽度小于等于767px时，背景色为红色；当屏幕宽度大于等于768px时，背景色为绿色。

示例2：根据屏幕宽度设置不同的图片大小

@media (max-device-width: 767px) {
  img {
    width: 100%;
    height: auto;
  }
}
@media (min-device-width: 768px) {
  img {
    width: 50%;
    height: auto;
  }
}

在这个示例中，我们使用了两个媒体查询来根据不同的设备宽度设置不同的图片大小。当设备宽度小于等于767px时，图片宽度为100%，高度自适应；当设备宽度大于等于768px时，图片宽度为50%，高度自适应。

通过这两个示例，我们可以看到，device-width和width在媒体查询中是有区别的，它们分别定位了设备屏幕的物理宽度和浏览器窗口的宽度，而且这种区别在响应式设计和移动端开发中尤为重要。