响应式设计中桌面端到平板、移动端切换的断点应如何设置？

结合你现有的三套设计稿尺寸，优先匹配设计稿适配区间的话，断点设置如下：

• 平板切换到移动端的断点：设置为767px。你的平板设计稿对应最小宽度是768px，只要视口宽度小于768px，就自动加载移动端布局，刚好覆盖320px到767px的所有移动设备尺寸，不会和768px的平板设计稿产生冲突。
• 桌面端切换到平板端的断点：设置为1439px。你的桌面设计稿对应宽度是1440px，视口宽度大于等于1440px时加载桌面布局，768px到1439px区间统一加载平板布局，完全匹配你手里的三套设计稿的适配范围。

如果偏好使用min-width的移动端优先写法，媒体查询可以参考下面的代码：

/* 默认样式适配移动端，对应320px设计稿 */
.your-class {
  /* 移动端样式代码 */
}

/* 768px及以上适配平板，对应768px设计稿 */
@media (min-width: 768px) {
  .your-class {
    /* 平板样式代码 */
  }
}

/* 1440px及以上适配桌面，对应1440px设计稿 */
@media (min-width: 1440px) {
  .your-class {
    /* 桌面样式代码 */
  }
}

补充提示：如果你需要兼顾市场上更多常见设备的尺寸，也可以根据实际测试情况微调桌面端断点，比如调整到1200px，但如果要求1:1还原现有三套设计稿，上面的原始方案是最优选择。

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