如何使用CSS按设备类型调整div宽度：电脑端设为500px？

这个需求用移动优先的媒体查询写法实现最简洁，完全匹配“移动端走默认宽度、仅桌面端设置500px”的规则，纯CSS就能搞定，兼容所有主流设备，不需要写复杂的设备UA判断。

具体实现步骤 #

• 第一步：把目标div的默认宽度（就是手机、平板、iPad访问时要生效的宽度）直接写在元素的基础样式里，这部分样式会对所有设备默认生效，不需要额外嵌套。
  示例代码：

/* 目标div的基础样式，直接对所有设备生效 */
.my-target-div {
  /* 替换成你预先定义的默认宽度值即可，比如100%、max-width: 300px这类 */
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
  box-sizing: border-box;
}

• 第二步：针对桌面端视口添加媒体查询，只有当设备达到桌面端视口尺寸时，才把div宽度覆盖为500px。
  这里的断点选择需要匹配你对“桌面端”的定义：如果需要把iPad、各类平板都归为移动设备走默认宽度，通常取min-width: 1024px作为触发阈值——这个尺寸下，常规手机、iPad竖屏/常规横屏的视口宽度都小于1024px，会自动走基础样式的默认宽度，不会触发桌面端的覆盖规则。
  对应的覆盖代码：

/* 仅桌面端访问时触发的宽度规则 */
@media screen and (min-width: 1024px) {
  .my-target-div {
    width: 500px;
  }
}

常见踩坑提醒 #

• 尽量不要反向写规则：不要先给div设置500px宽度，再写媒体查询让移动端覆盖为默认宽度。这种写法不仅代码冗余，还容易漏掉小屏设备的尺寸适配，出现样式错乱。
• 断点不要设置过低：如果把媒体查询的触发阈值设为768px，那iPad竖屏的768px视口会被判定为桌面端，自动应用500px宽度，不符合你把iPad归为移动设备的需求。
• 如果需要把大屏平板（比如12.9寸iPad Pro横屏，视口宽度接近1366px）也归为移动设备走默认宽度，可以把媒体查询的触发阈值调整为1200px，进一步收窄桌面端的判定范围。

内容的提问来源于stack exchange，提问作者Aidan Young